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 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python练习程序批量修改文件名
2014/01/16 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
从0开始的Python学习016异常
2019/04/08 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python PIL模块的基本使用
2020/09/29 Python
如何用python批量调整视频声音
2020/12/22 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
护士的岗位职责
2013/12/04 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
纠纷协议书
2014/04/16 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
实习生矿工检讨书
2014/10/13 职场文书
运动会表扬稿
2015/01/16 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python