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
Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
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
You might like
需要发散思维学习PHP
2009/06/29 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php源码的安装方法和实例
2019/09/26 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python运行异常管理解决方案
2020/03/09 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
Java如何支持I18N?
2016/10/31 面试题
大学生求职信
2014/06/17 职场文书
软件测试专业推荐信
2014/09/18 职场文书
农业生产宣传标语
2014/10/08 职场文书
大学生自我评价范文
2015/03/03 职场文书
停水通知
2015/04/16 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
企业法人代表证明书
2015/06/18 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Python面向对象编程之类的概念
2021/11/01 Python