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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python工厂函数用法实例分析
2018/05/14 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python实现京东抢秒杀功能
2021/01/25 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
应聘医学检验人员自荐信
2013/09/27 职场文书
升职自荐书范文
2013/11/28 职场文书
网络管理专业求职信
2014/03/15 职场文书
党员一帮一活动总结
2014/07/08 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
给老婆的道歉信
2015/01/20 职场文书
总经理检讨书范文
2015/02/16 职场文书
刑事辩护词范文
2015/05/21 职场文书
关于运动会的宣传稿
2015/07/23 职场文书