首页
所有分类
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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JXTree对象，读取外部xml文件数据，生成树的函数
Apr 02 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
浅析node.js中close事件
Nov 26 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
爬虫(2) Xpath(1) binlog(2) Counter(1) most_common(1) MIME(1) pip(1) 写入策略(1) LOGO(1) 抖音(1)
You might like
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
jQuery实现动态向上滚动
2020/12/21 jQuery
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python用户管理系统
2018/03/13 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python读写压缩文件的方法
2020/07/30 Python
英国领先的野生鸟类食品供应商：GardenBird
2018/08/09 全球购物
西班牙香水和化妆品连锁店：Druni
2019/05/05 全球购物
BannerBuzz加拿大：在线定制横幅印刷、广告和标志
2020/03/10 全球购物
18岁生日感言
2014/01/12 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
干部个人考察材料
2014/12/24 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书