jquery+ajax+text文本框实现智能提示完整实例


Posted in Javascript onJuly 09, 2016

本文实例讲述了jquery+ajax+text文本框实现智能提示的方法。分享给大家供大家参考,具体如下:

模仿百度查询的智能提示

先看看效果图:

jquery+ajax+text文本框实现智能提示完整实例

代码部分:

CSS代码:

<style type="text/css">
 #searchresult
 {
  width: 130px;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  left: 130px;
  top: 71px;
  background: #E0E0E0;
  border-top: none;
 }
 .line
 {
  font-size: 12px;
  background: #E0E0E0;
  width: 130px;
  padding: 2px;
 }
 .hover
 {
  background: #007ab8;
  width: 130px;
  color: #fff;
 }
 .std
 {
  width: 150px;
 }
</style>

html代码(本文采用的asp.net页面编写的):

<body>
 <form id="form1" runat="server">
 <div>
  智能模糊查询提示
  <input id="txt_search" type="text" style="width: 150px;" />
  <div id="searchresult" style="display: none;">
  </div>
 </div>
 </form>
</body>

jquery代码部分:

<script type="text/javascript">
  $(function () {
   $("#txt_search").keyup(function (evt) {
    ChangeCoords(); //控制查询结果div坐标
    var k = window.event ? evt.keyCode : evt.which;
    //输入框的id为txt_search,这里监听输入框的keyup事件
    //不为空 && 不为上箭头或下箭头或回车
    if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
     $.ajax({
      type: 'Post',
      //async: false, //同步执行,不然会有问题
      dataType: "json",
      url: "IntelligenceSelect.aspx/GetUserNameList", //提交的页面/方法名
      data: "{'userName':'" + $("#txt_search").val() + "'}",    //参数(如果没有参数:null)
      contentType: "application/json; charset=utf-8",
      error: function (msg) {//请求失败处理函数
       alert("数据加载失败");
      },
      success: function (data) { //请求成功后处理函数。
       var objData = eval("(" + data.d + ")");
       if (objData.length > 0) {
        var layer = "";
        layer = "<table id='aa'>";
        $.each(objData, function (idx, item) {
         layer += "<tr class='line'><td class='std'>" + item.userName + "</td></tr>";
        });
        layer += "</table>";
        //将结果添加到div中
        $("#searchresult").empty();
        $("#searchresult").append(layer);
        $(".line:first").addClass("hover");
        $("#searchresult").css("display", "");
        //鼠标移动事件
        $(".line").hover(function () {
         $(".line").removeClass("hover");
         $(this).addClass("hover");
        }, function () {
         $(this).removeClass("hover");
         //$("#searchresult").css("display", "none");
        });
        //鼠标点击事件
        $(".line").click(function () {
         $("#txt_search").val($(this).text());
         $("#searchresult").css("display", "none");
        });
       } else {
        $("#searchresult").empty();
        $("#searchresult").css("display", "none");
       }
      }
     });
    }
    else if (k == 38) {//上箭头
     $('#aa tr.hover').prev().addClass("hover");
     $('#aa tr.hover').next().removeClass("hover");
     $('#txt_search').val($('#aa tr.hover').text());
    } else if (k == 40) {//下箭头
     $('#aa tr.hover').next().addClass("hover");
     $('#aa tr.hover').prev().removeClass("hover");
     $('#txt_search').val($('#aa tr.hover').text());
    }
    else if (k == 13) {//回车
     $('#txt_search').val($('#aa tr.hover').text());
     $("#searchresult").empty();
     $("#searchresult").css("display", "none");
    }
    else {
     $("#searchresult").empty();
     $("#searchresult").css("display", "none");
    }
   });
   $("#searchresult").bind("mouseleave", function () {
    $("#searchresult").empty();
    $("#searchresult").css("display", "none");
   });
  });
  //设置查询结果div坐标
  function ChangeCoords() {
   // var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离,像素,整型
   // var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
   var left = $("#txt_search").position().left; //获取距离最左端的距离,像素,整型
   var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
   $("#searchresult").css("left", left + "px"); //重新定义CSS属性
   $("#searchresult").css("top", top + "px"); //同上
  }
</script>

.cs后台代码:

#region
[WebMethod()]
public static string GetUserNameList(string userName)
{
  StringBuilder returnStr = new StringBuilder();
  string strsql = "select userName from pub_user_inf where userName like '" + userName + "%' and useStatus=1";
  DataTable dt = pms.SqlHelper.ExecuteDataTable(strsql);
  if (dt.Rows.Count > 0)
  {
   returnStr.Append(ToJson(dt));
   return returnStr.ToString();
  }
  else
  {
   return "";
  }
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string ToJson(DataTable dt)
{
  StringBuilder jsonBuilder = new StringBuilder();
  jsonBuilder.Append("[");
  for (int i = 0; i < dt.Rows.Count; i++)
  {
   jsonBuilder.Append("{");
   for (int j = 0; j < dt.Columns.Count; j++)
   {
    jsonBuilder.Append("\"");
    jsonBuilder.Append(dt.Columns[j].ColumnName);
    jsonBuilder.Append("\":\"");
    jsonBuilder.Append(dt.Rows[i][j].ToString());
    jsonBuilder.Append("\",");
   }
   jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
   jsonBuilder.Append("},");
  }
  jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
  jsonBuilder.Append("]");
  return jsonBuilder.ToString();
}
#endregion

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
解析原生JS getComputedStyle
May 25 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
You might like
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
javascript document.images实例
2008/05/27 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
2015初中生物教研组工作总结
2015/07/21 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫