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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php和html的区别点详细总结
2019/09/24 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
使用Python生成200个激活码的实现方法
2019/11/22 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
家电业务员岗位职责
2014/03/10 职场文书
小学班主任培训方案
2014/06/04 职场文书
2015年老干部工作总结
2015/04/23 职场文书
幼儿园见习总结
2015/06/23 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers