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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php while循环得到循环次数
2013/10/26 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
深入分析PHP设计模式
2020/06/15 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python代码如何注释
2020/06/01 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python模块如何查看
2020/06/16 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
文员岗位职责
2013/11/09 职场文书
超市活动计划书
2014/04/24 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
导游词之湖北武当山
2019/09/23 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS