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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JS中准确判断变量类型的方法
Jun 01 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python实现员工管理系统
2018/01/11 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
如何基于python实现归一化处理
2020/01/20 Python
python如何判断IP地址合法性
2020/04/05 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
交通安全教育制度
2014/02/02 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2015年司法局工作总结
2015/05/22 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python