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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 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实现编辑和保存文件的方法
2015/07/20 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
javascript multibox 全选
2009/03/22 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
ant design实现圈选功能
2019/12/17 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python3 反射的四种基本方法解析
2019/08/26 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
初二政治教学反思
2014/01/12 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
初中毕业感言300字
2015/07/31 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python