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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
layui数据表格重载实现往后台传参
Nov 15 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多线程类及用法实例
2014/12/03 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python 实现图片裁剪小工具
2021/02/02 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
思想品德自我评价
2014/02/04 职场文书
腾讯广告词
2014/03/19 职场文书
我的理想演讲稿
2014/04/30 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis