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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
原生js实现随机点名
Jul 05 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS hashMap实例详解
2016/05/26 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python实现排序算法
2014/02/14 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python类装饰器用法实例
2015/06/04 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python表达式的优先级详解
2020/02/18 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python不同系统中打开方法
2020/06/23 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
2015年春节标语口号
2014/12/09 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis