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>
相关文章
这是一个基于jquey写的倒计时。当然代码有点小改动，只是改了一下展示效果。2014-05-05
这篇文章主要介绍了jquery form表单序列化为对象具体实现,需要的朋友可以参考下2014-03-03
jqGrid可以动态读取和加载外部数据，本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示，以及可以通过输入关键字查询数据的ajax交互过程2015-12-12
这篇文章主要为大家详细介绍了jQuery实现消息滚动播放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文主要分享了基于jQuery实现立体式数字动态增加（animate方法）的实例代码。有很好的参考价值，需要的朋友一起来看下吧2016-12-12
用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出，使用jquery在一个INPUT框中即可实现2014-01-01
jQuery使用prepend()方法在元素前添加内容用法实例
这篇文章主要介绍了jQuery使用prepend()方法在元素前添加内容的方法,实例分析了prepend方法追加内容的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
在QWrap群里讨论时，有同学问jquery/yui等已做到极致，我们有没必要再重复造一个叫QWrap的轮子？2011-02-02
Jquery 组合form元素为json格式,asp.net反序列化
Jquery组合form元素为json格式,asp.net反序列化实现代码，大家可以具体的看下面的说明。2009-07-07
这篇文章主要介绍了jquery实现全屏滚动，针对全屏滚动知识进行详细阐述，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论