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的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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与数据库代码开发规范
2013/08/08 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python中的json总结
2018/10/11 Python
python中的itertools的使用详解
2020/01/13 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
医院办公室主任职责
2013/12/29 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
比赛口号霸气押韵
2015/12/24 职场文书