首页
所有分类
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 删除字符串最后一个字符的方法解析
Feb 11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
Android面试题(6) LINUX面试题(83) JAVA面试题(401) 冰岛购物网站(1) DB面试题(126) C++面试题(199) PHP面试题(54) C#面试题(90) .NET面试题(131) 网络工程师面试题(96)
You might like
数据库的日期格式转换
2006/10/09 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
微信小程序动画组件使用解析，类似vue，且更强大
2019/08/01 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python中subprocess批量执行linux命令
2018/04/27 Python
用Python实现读写锁的示例代码
2018/11/05 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python实现文件的分割与合并
2019/08/29 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python如何写try语句
2020/07/14 Python
python如何使用腾讯云发送短信
2020/09/17 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式，官方实例)
2021/01/10 Python
体育教育专业自荐信范文
2013/12/20 职场文书
产假请假条
2014/04/10 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年村委会工作总结
2014/11/24 职场文书
亲戚关系证明
2015/06/24 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
如何理解及使用Python闭包
2021/06/01 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL