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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
js实现3D旋转效果
Aug 18 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 include加载文件两种方式效率比较
2010/08/08 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python开发之文件操作用法实例
2015/11/13 Python
Python 装饰器深入理解
2017/03/16 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
浅谈Python type的使用
2019/11/19 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
如何利用Python 进行边缘检测
2020/10/14 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
节水口号标语
2014/06/19 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
react 项目中引入图片的几种方式
2021/06/02 Javascript
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript