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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
vue实现公共方法抽离
Jul 31 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PDO::setAttribute讲解
2019/01/29 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
详解Chai.js断言库API中文文档
2018/01/31 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
书法社团活动总结
2015/05/07 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
一行代码python实现文件共享服务器
2021/04/22 Python