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库 pj介绍
Dec 19 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Node.js学习入门
Jan 03 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 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 可变函数使用小结
2018/06/12 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js星星评分效果
2014/07/24 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
简单了解python数组的基本操作
2019/11/26 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书