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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
Javascript 数组排序详解
Oct 22 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
原生JS实现九宫格抽奖
Sep 13 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结合ajax实现手机发红包的案例
2016/10/13 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
JS实现吸顶特效
2020/01/08 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
SQL面试题
2013/04/30 面试题
静态变量和实例变量的区别
2015/07/07 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
先进工作者申报材料
2014/12/23 职场文书
董事长助理岗位职责
2015/02/11 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis