首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

wdfscp

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
Javascript实现快速排序（Quicksort）的算法详解
Sep 06 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Javascript Event（事件）的传播与冒泡
Jan 23 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 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
Pickle(1) Launch Mode(1) 加密(1) requests(1) hmac(1) 解密(1) logging(1) hashlib(1) apt命令(1) 类加载器(1)
You might like
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
Jquery Ajax学习实例6 向WebService发出请求，返回DataSet(XML) 异步调用
2010/03/18 Javascript
javascript 进阶篇1 正则表达式，cookie管理，userData
2012/03/14 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
简单了解Django模板的使用
2017/12/20 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python定义函数实现累计求和操作
2020/05/03 Python
大学生志愿者感言
2014/01/15 职场文书
小学英语教学反思案例
2014/02/04 职场文书
个性婚礼策划方案
2014/05/17 职场文书
廉政教育的心得体会
2014/09/01 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
群众路线剖析材料（四风）
2014/11/05 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
创业计划书详解
2019/07/19 职场文书