当前位置：Gxlcms > JavaScript > jquery+ajax+text文本框实现智能提示完整实例

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

时间：2021-07-01 10:21:17 帮助过：21人阅读

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

模仿百度查询的智能提示

先看看效果图：

代码部分:

CSS代码:

  1. <style type="text/css">
  2.  #searchresult
  3.  {
  4.   width: 130px;
  5.   position: absolute;
  6.   z-index: 1;
  7.   overflow: hidden;
  8.   left: 130px;
  9.   top: 71px;
  10.   background: #E0E0E0;
  11.   border-top: none;
  12.  }
  13.  .line
  14.  {
  15.   font-size: 12px;
  16.   background: #E0E0E0;
  17.   width: 130px;
  18.   padding: 2px;
  19.  }
  20.  .hover
  21.  {
  22.   background: #007ab8;
  23.   width: 130px;
  24.   color: #fff;
  25.  }
  26.  .std
  27.  {
  28.   width: 150px;
  29.  }
  30. </style>

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

  1. <body>
  2.  <form id="form1" runat="server">
  3.  <div>
  4.   智能模糊查询提示
  5.   <input id="txt_search" type="text" style="width: 150px;" />
  6.   <div id="searchresult" style="display: none;">
  7.   </div>
  8.  </div>
  9.  </form>
  10. </body>

jquery代码部分：

  1. <script type="text/javascript">
  2.   $(function () {
  3.    $("#txt_search").keyup(function (evt) {
  4.     ChangeCoords(); //控制查询结果div坐标
  5.     var k = window.event ? evt.keyCode : evt.which;
  6.     //输入框的id为txt_search，这里监听输入框的keyup事件
  7.     //不为空 && 不为上箭头或下箭头或回车
  8.     if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
  9.      $.ajax({
  10.       type: 'Post',
  11.       //async: false, //同步执行，不然会有问题
  12.       dataType: "json",
  13.       url: "IntelligenceSelect.aspx/GetUserNameList", //提交的页面/方法名
  14.       data: "{'userName':'" + $("#txt_search").val() + "'}",    //参数（如果没有参数：null）
  15.       contentType: "application/json; charset=utf-8",
  16.       error: function (msg) {//请求失败处理函数
  17.        alert("数据加载失败");
  18.       },
  19.       success: function (data) { //请求成功后处理函数。
  20.        var objData = eval("(" + data.d + ")");
  21.        if (objData.length > 0) {
  22.         var layer = "";
  23.         layer = "<table id='aa'>";
  24.         $.each(objData, function (idx, item) {
  25.          layer += "<tr class='line'><td class='std'>" + item.userName + "</td></tr>";
  26.         });
  27.         layer += "</table>";
  28.         //将结果添加到div中
  29.         $("#searchresult").empty();
  30.         $("#searchresult").append(layer);
  31.         $(".line:first").addClass("hover");
  32.         $("#searchresult").css("display", "");
  33.         //鼠标移动事件
  34.         $(".line").hover(function () {
  35.          $(".line").removeClass("hover");
  36.          $(this).addClass("hover");
  37.         }, function () {
  38.          $(this).removeClass("hover");
  39.          //$("#searchresult").css("display", "none");
  40.         });
  41.         //鼠标点击事件
  42.         $(".line").click(function () {
  43.          $("#txt_search").val($(this).text());
  44.          $("#searchresult").css("display", "none");
  45.         });
  46.        } else {
  47.         $("#searchresult").empty();
  48.         $("#searchresult").css("display", "none");
  49.        }
  50.       }
  51.      });
  52.     }
  53.     else if (k == 38) {//上箭头
  54.      $('#aa tr.hover').prev().addClass("hover");
  55.      $('#aa tr.hover').next().removeClass("hover");
  56.      $('#txt_search').val($('#aa tr.hover').text());
  57.     } else if (k == 40) {//下箭头
  58.      $('#aa tr.hover').next().addClass("hover");
  59.      $('#aa tr.hover').prev().removeClass("hover");
  60.      $('#txt_search').val($('#aa tr.hover').text());
  61.     }
  62.     else if (k == 13) {//回车
  63.      $('#txt_search').val($('#aa tr.hover').text());
  64.      $("#searchresult").empty();
  65.      $("#searchresult").css("display", "none");
  66.     }
  67.     else {
  68.      $("#searchresult").empty();
  69.      $("#searchresult").css("display", "none");
  70.     }
  71.    });
  72.    $("#searchresult").bind("mouseleave", function () {
  73.     $("#searchresult").empty();
  74.     $("#searchresult").css("display", "none");
  75.    });
  76.   });
  77.   //设置查询结果div坐标
  78.   function ChangeCoords() {
  79.    // var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
  80.    // var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
  81.    var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型
  82.    var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
  83.    $("#searchresult").css("left", left + "px"); //重新定义CSS属性
  84.    $("#searchresult").css("top", top + "px"); //同上
  85.   }
  86. </script>

.cs后台代码:

  1. #region
  2. [WebMethod()]
  3. public static string GetUserNameList(string userName)
  4. {
  5.   StringBuilder returnStr = new StringBuilder();
  6.   string strsql = "select userName from pub_user_inf where userName like '" + userName + "%' and useStatus=1";
  7.   DataTable dt = pms.SqlHelper.ExecuteDataTable(strsql);
  8.   if (dt.Rows.Count > 0)
  9.   {
  10.    returnStr.Append(ToJson(dt));
  11.    return returnStr.ToString();
  12.   }
  13.   else
  14.   {
  15.    return "";
  16.   }
  17. }
  18. #endregion
  19. #region dataTable转换成Json格式
  20. /// <summary>
  21. /// dataTable转换成Json格式
  22. /// </summary>
  23. /// <param name="dt"></param>
  24. /// <returns></returns>
  25. public static string ToJson(DataTable dt)
  26. {
  27.   StringBuilder jsonBuilder = new StringBuilder();
  28.   jsonBuilder.Append("[");
  29.   for (int i = 0; i < dt.Rows.Count; i++)
  30.   {
  31.    jsonBuilder.Append("{");
  32.    for (int j = 0; j < dt.Columns.Count; j++)
  33.    {
  34.     jsonBuilder.Append("\"");
  35.     jsonBuilder.Append(dt.Columns[j].ColumnName);
  36.     jsonBuilder.Append("\":\"");
  37.     jsonBuilder.Append(dt.Rows[i][j].ToString());
  38.     jsonBuilder.Append("\",");
  39.    }
  40.    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
  41.    jsonBuilder.Append("},");
  42.   }
  43.   jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
  44.   jsonBuilder.Append("]");
  45.   return jsonBuilder.ToString();
  46. }
  47. #endregion

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！