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

Jquery实现搜索框提示功能示例代码

Posted in Javascript onAugust 13, 2013

博客的前某一篇文章中https://3water.com/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能。最近在一个管理项目的项目中，使用后发现，真的反应很慢，数据量很大的情况下使用Ajax去实现真的不合适，于是，我又写了一个使用Jquery来实现方法。
废话不多说，上图上代码:
Jquery实现搜索框提示功能示例代码 
引用方式： 

<body style="background-color: White;"> 
<form id="form1" runat="server"> 
<div id="filter_stationType"></div> 
<div class="gover_search" width="100%"> 
<div class="gover_search_form clearfix" width="100%"> 
<span class="search_t"><b>按项目名称检索：</b></span> 


　 <%--autocomplete="off" 这个设置是禁止浏览器自动完成提示功能（就是历史记录自动提示）--%> 
<asp:TextBox ID="search" runat="server" CssClass="input_search_key" Width="240px" autocomplete="off"></asp:TextBox> <asp:Button ID="btnSearchProject" runat="server" CssClass="search_btn" Text="查询" OnClick="btnSearchProject_Click" /> <div class="search_suggest" id="gov_search_suggest"> <ul> </ul> </div> </div> </div> </form> </body>

JS代码： 
<script type="text/javascript"> 
//实现搜索输入框的输入提示js类 
var oSearchSuggest = function(searchFuc) { 
// function oSearchSuggest(searchFuc) { 
var searchsubmit = $('#btnSearchProject'); 
var input = $('#search'); 
var suggestWrap = $('#gov_search_suggest'); 
var key = ""; 
var init = function() { 
input.bind('keyup', sendKeyWord); 
input.bind('blur', function() { setTimeout(hideSuggest, 100); }) 
} 
var hideSuggest = function() { 
suggestWrap.hide(); 
} 
//发送请求，根据关键字到后台查询 
var sendKeyWord = function(event) { 
//键盘选择下拉项 
if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) { 
var current = suggestWrap.find('li.hover'); 
if (event.keyCode == 38) { 
if (current.length > 0) { 
var prevLi = current.removeClass('hover').prev(); 
if (prevLi.length > 0) { 
prevLi.addClass('hover'); 
input.val(prevLi.html()); 
} 
} else { 
var last = suggestWrap.find('li:last'); 
last.addClass('hover'); 
input.val(last.html()); 
} 
} else if (event.keyCode == 40) { 
if (current.length > 0) { 
var nextLi = current.removeClass('hover').next(); 
if (nextLi.length > 0) { 
nextLi.addClass('hover'); 
input.val(nextLi.html()); 
} 
} else { 
var first = suggestWrap.find('li:first'); 
first.addClass('hover'); 
input.val(first.html()); 
} 
} 
//输入字符 
} else { 
var valText = $.trim(input.val()); 
if (valText == '' || valText == key) { 
return; 
} 
searchFuc(valText); 
key = valText; 
} 
} 
//请求返回后，执行数据展示 
this.dataDisplay = function(data) { 
if (data.length <= 0) { 
suggestWrap.hide(); 
return; 
} 
//往搜索框下拉建议显示栏中添加条目并显示 
var li; 
var tmpFrag = document.createDocumentFragment(); 
suggestWrap.find('ul').html(''); 
for (var i = 0; i < data.length; i++) { 
li = document.createElement('LI'); 
li.innerHTML = data[i]; 
tmpFrag.appendChild(li); 
} 
suggestWrap.find('ul').append(tmpFrag); 
suggestWrap.show(); 
//为下拉选项绑定鼠标事件,实现鼠标点击选取 
suggestWrap.find('li').hover(function() { 
suggestWrap.find('li').removeClass('hover'); 
$(this).addClass('hover'); 
}, function() { 
$(this).removeClass('hover'); 
}).bind('mousedown', function() { 
input.val(this.innerHTML); 
suggestWrap.hide(); 
searchsubmit.click(); 
}); 
} 
init(); 
}; 
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名 
var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 
//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 
//参数为一个字符串，是搜索输入框中当前的内容 
function sendKeyWordToBack(keyword) { 
var sSearchKey = $("#search").val(); 
$("#search").bind("input propertychange", function(event) { 
sSearchKey = $("#search").val(); 
}); 
$.ajax({ 
url: "WebService/wbsBLL.asmx/GetSearchInfo", //后台webservice里的方法名称根据自己需要实现返回数据位json 
type: "POST", 
dataType: "json", 
async: false, 
contentType: "application/json; charset=utf-8", 
data: '{"sKeyName":"' + sSearchKey + '"}', 
traditional: false, 
beforeSend: function(x) { x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); }, 
success: function(data) { 
var aData = []; 
for (var i in data) { 
var jsonObj = $.parseJSON(data[i]); 
for (var item in jsonObj) { 
jsonObj = eval(jsonObj.SeachTable); 
for (var i = 0; i < jsonObj.length; i++) { 
if (jsonObj[i].projectName != "") { 
aData.push(jsonObj[i].projectName); 
} 
} 
} 
} 
searchSuggest.dataDisplay(aData); 
}, 
error: function(msg, e) { 
$("#filter_stationType").html("SQL语句有错误"); 
}, 
complete: function(x) { 
} 
}); 
} 
</script>

index.css: 
@charset "utf-8"; 
/* CSS Document */ 
body, ul, li { 
margin: 0; 
padding: 0; 
} 
body{ 
font-size:12px; 
font-family:sumsun,arial; 
color:#666666; 
background:#FFFFFF; 
} 
#searchtable{background:#E4E9F2; border-bottom:1px solid #C8CFDA; padding:0px 8px;height: 33px;} 
#searchtable label{font-size:14px; display:inline-block; float:left; color:#333; text-shadow:1px 1px 0px #EBF5FA; font-weight:bold; padding:10px 0 8px 16px; background:url(../images/pemIcons.png) 2px -34px no-repeat; _background:url(../images/pemIcons.gif) 2px -34px no-repeat;} 
#searchtable #search{border: 1px solid #C3C3C3; border-top: 1px solid #7C7C7C; border-left: 1px solid #9A9A9A;background: url(../images/today.gif) 0 -162px white repeat-x;outline: none; padding:3px 4px; _padding:3px 4px 5px; display:inline-block; float:left; margin:6px 12px 4px 0; zoom:1;} 
#searchtable .btnSubmit{margin-top:6px;margin-left:5px; zoom:1; border: 1px solid #236300; background: #6B9F40 url(../images/buttonbg01.png) repeat-x 0 0; font-size:12px; color:#FFF; line-height:24px; height:24px; width:60px; font-weight:bold; display:block; text-align:center; float:left;} 
#searchtable .btnSubmit:hover{text-decoration:none; background-position:0 -32px;} 
#searchtable .btnSubmit:active{background-position:0 -64px;} 
#searchtable .fBtn:hover{color:#000;} 
table.datagrid { 
border:1px solid #DDDDDD; 
border-collapse:collapse; 
} .gover_search{ position:relative; z-index:99; height:33px; padding:15px 0 0 20px; border:1px solid #b8cfe6; border-bottom:0; background:#E4E9F2;border-bottom:1px solid #C8CFDA;} 
.gover_search_form{height:36px;} 
.gover_search .search_t{ float:left; width:112px; line-height:26px; color:#666666;} 
.gover_search .input_search_key{ float:left; width:462px; height:18px; padding:3px; margin-right:5px; border:1px solid #cccccc; line-height:18px; background:#FFFFFF;} 
.gover_search .search_btn{ padding-left:4px; width:68px; height:26px; overflow:hidden; border:1px solid #cccccc; text-align:center; color:#ffffff; letter-spacing:5px; background: #6B9F40 url(../images/buttonbg01.png) repeat-x 0 0; cursor:pointer; font-weight:bold;} 
.gover_search .search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #999999; display:none; } 
.gover_search .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#FFFFFF; cursor:default;} 
.gover_search .search_suggest li.hover{background:#DDDDDD;}

后台的webservice代码这里就不展示了，主要就是查询数据库返回一个JSON格式的查询结果给Jquery中的Data

Jquery实现搜索框提示功能示例代码

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

Javascript 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
canvas 弹幕效果（实例分享）
Jan 11 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
jquery固定底网站底部菜单效果
Aug 13 #Javascript
js 三级关联菜单效果实例
Aug 13 #Javascript
js 单击式的下拉菜单效果实例
Aug 13 #Javascript
让元素在网页中可拖动示例代码
Aug 13 #Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
apt命令(1) 面向对象(3) 加密(1) hashlib(1) Pickle(1) requests(1) openpyxl(1) hmac(1) 解密(1) logging(1)
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
PHP 上传文件的方法（类）
2009/07/30 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
Jquery实现瀑布流布局（备有详细注释）
2015/07/31 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[03:57]2016完美“圣”典风云人物：rOtk专访
2016/12/09 DOTA
python中reader的next用法
2018/07/24 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
如何理解委托
2012/01/06 面试题
历史学专业求职信
2014/06/19 职场文书
公司合并协议书范本
2014/09/30 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL