Jquery模仿Baidu、Google搜索时自动补充搜索结果提示


Posted in Javascript onDecember 26, 2013

好程序就是懒人喜欢的程序。好程序员就是懒人程序员。昨天研究了一下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>
Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
javascript 常用代码技巧大收集
Feb 25 Javascript
javascript 日期常用的方法
Nov 11 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 #Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 #Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 #Javascript
JS获取select-option-text_value的方法
Dec 26 #Javascript
js中split函数的使用方法说明
Dec 26 #Javascript
js中reverse函数的用法详解
Dec 26 #Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 #Javascript
You might like
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP对象相关知识总结
2017/04/09 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
索趣科技的答案
2007/02/07 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
js实现进度条的方法
2015/02/13 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解JS模块导入导出
2017/12/20 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
珍惜资源保护环境的建议书
2014/05/14 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
新学期开学标语2015
2015/07/16 职场文书
教师网络培训心得体会
2016/01/09 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技