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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 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
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
客服服务心得体会
2013/12/30 职场文书
给物业的表扬信
2014/01/21 职场文书
读书活动实施方案
2014/03/10 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
电话客服工作职责
2014/07/27 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
个人总结与自我评价
2015/02/14 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书