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 25 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
深入分析javascript中console命令
Aug 14 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
JavaScript进制转换实现方法解析
Jan 18 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/06/07 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
python对html代码进行escape编码的方法
2015/05/04 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
django url到views参数传递的实例
2019/07/19 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
python实现磁盘日志清理的示例
2020/11/05 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
中间件分为哪几类
2012/03/14 面试题
优秀辅导员事迹材料
2014/02/16 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
如何写辞职书
2015/02/26 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技