Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
更新时间：2013年12月26日 17:01:30 作者：
昨天研究了一下Jquery 模仿Baidu、Google收索时自动补充收索结果的提示，感觉效果还行，下面与大家分享下代码
好程序就是懒人喜欢的程序。好程序员就是懒人程序员。昨天研究了一下Jquery 模仿Baidu、Google搜索时自动补充搜索结果的提示，感觉效果还行。特意和大家分享一下。所需Jquery插件。请看代码：
<script type="text/javascript">
$().ready( function () {
$(":text").result(auto);
function auto(data){
$("#keyWord").val(data.name);
}
$("#keyWord").autocomplete(obj, {//obj是数据对象数组Json
minChars: 0, //表示在自动完成激活之前填入的最小字符
max: 5, //表示列表里的条目数
autoFill: true, //表示自动填充
mustMatch: false, //表示必须匹配条目,文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
matchContains: true, //表示包含匹配,相当于模糊匹配
scrollHeight: 200, //表示列表显示高度,默认高度为180
formatItem: function (row) {
return row.name;
},
formatMatch: function (row) {
return row.name;
},
formatResult: function (row) {
return row.value;
}
});
});
</script>
jsp：
<div>
<h4> 模仿BaiDu,google搜索提示功能</h4>
<table>
<tr><td>名称：<input type="text" id="keyWord" /></td></tr>
</table>
</div>
复制代码 代码如下:
<script type="text/javascript">
$().ready( function () {
$(":text").result(auto);
function auto(data){
$("#keyWord").val(data.name);
}
$("#keyWord").autocomplete(obj, {//obj是数据对象数组Json
minChars: 0, //表示在自动完成激活之前填入的最小字符
max: 5, //表示列表里的条目数
autoFill: true, //表示自动填充
mustMatch: false, //表示必须匹配条目,文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
matchContains: true, //表示包含匹配,相当于模糊匹配
scrollHeight: 200, //表示列表显示高度,默认高度为180
formatItem: function (row) {
return row.name;
},
formatMatch: function (row) {
return row.name;
},
formatResult: function (row) {
return row.value;
}
});
});
</script>
jsp：
复制代码 代码如下:
<div>
<h4> 模仿BaiDu,google搜索提示功能</h4>
<table>
<tr><td>名称：<input type="text" id="keyWord" /></td></tr>
</table>
</div>
相关文章
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法，使用jqgrid的朋友可以参考下。2010-10-10
jquery 关于event.target使用的几点说明介绍
本篇文章介绍了，jquery中关于event.target使用的几点说明。需要的朋友参考下2013-04-04
这个选项卡不是一个单独的选项卡，而是多个选项卡，每个选项卡里面有多个选项，而且选项的个数也不一样。废话不多说，直接上jquery代码。2013-03-03
这篇文章主要介绍了如何解决jQuery动态获取手机屏幕高和宽的问题,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery中:button选择器用法,实例分析了:button选择器的功能、定义及选取按钮的使用技巧,需要的朋友可以参考下2015-01-01
浅谈jQuery中对象遍历.eq().first().last().slice()方法
本文给大家分析了jQuery中的对象遍历.eq().first().last().slice()方法的使用，以及他们之间的区别，jQuery源码中的使用。2014-11-11
瀑布流触发分页可以理解为微博中的浏览效果、到一定程度时显示页数进行分页,而分页触发瀑布流可以理解为Twitter拉到一页设定的最大条数后继续用瀑布流展示下一页,接下来我们就来详细看看AJAX实现瀑布流触发分页与分页触发瀑布流的方法2016-05-05
CheckBoxList多选样式jquery、C#获取选择项
使用jquery、C#获取CheckBoxList选择项，实现如下，感兴趣的朋友可以参考下2013-09-09
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
这篇文章主要介绍了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法,涉及jQuery表单元素获取及正则验证相关操作技巧,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了jQuery+css实现的切换图片功能代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,需要的朋友可以参考下2016-01-01
最新评论