Jquery插件仿百度搜索关键字自动匹配功能


Posted in Javascript onMay 11, 2016

本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下
jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器。

下面是具体的使用方法:

1、使用设置

首页,要把插件的js代码嵌入到你自己的项目中去。

<script src="jquery.js" type="text/javascript"><!--mce:0--></script><script src="jquery.autocomplete.js" type="text/javascript"><!--mce:1--></script>

2、使用方法

为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。

<input id="query" name="q" />

初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。

$('#query').autocomplete({ serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests minChars: 2, // Minimum request length for triggering autocomplete delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex) maxHeight: 400, // Maximum height of the suggestion list, in pixels width: 300, // List width zIndex: 9999, // List's z-index deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms. params: { country: 'Yes'}, // Additional parameters onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected, lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete });

根据文本表单中的输入信息,进行关键字提示匹配。

{ query:'Li', // Original request suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions. }

jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。

var ac = $('#query').autocomplete({ /*parameters*/ }); ac.disable(); ac.enable(); ac.setOptons({ zIndex: 1001 });

3、设置表现样式
最后,用div和css美化表现效果。

<div class="autocomplete-w1"><div id="Autocomplete_1240430421731" class="autocomplete" style="width: 299px;"><div><strong>Li</strong>beria</div><div><strong>Li</strong>byan Arab Jamahiriya</div><div><strong>Li</strong>echtenstein</div><div class="selected"><strong>Li</strong>thuania</div></div></div> .autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }.autocomplete .selected { background:#F0F0F0; }.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }.autocomplete strong { font-weight:normal; color:#3399FF; }

4、实例讲解

<html>
<head>
 <title></title>
 <style type="text/css">
 #txtKey{ width:300px;}
 </style>
 <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
 <script src="Jquery1.7.js" type="text/javascript"></script>
 <script src="js/jquery.autocomplete.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function () {
   var array = ['asp.net', 'asp.net mvc', 'wcf', 'wpf', 'win8', 'windows phone', '张东', '张熙', '张亚飞'];
   /*autocomplete函数
   (1)获取txtKey中用户输入的值(用户每输入一个字符,都会获取一次)
   (2)将获取的值和array集合中的元素进行比较,找出匹配的元素,并显示出来
   (3)会将用户选择的项添加到txtKey中*/
   /*result函数:对用户选择的结果进行操作。data参数表示用户选择的项*/
   $('#txtKey').autocomplete(array).result(function (event, data) { window.location.href = 'http://www.baidu.com/s?wd=' + data + '&rsv_bp=0&ch=&tn=baidu&bar=&rsv_spt=3&ie=utf-8&rsv_sug3=6&rsv_sug=0&rsv_sug1=3&rsv_sug4=229&inputT=1458'; })
  })
 </script>
</head>
<body>
 <input id="txtKey" type="text" /><input id="Button1" type="button" value="百度一下" />
 <input id="Text1" type="text" />
</body>
</html>

实现效果如下:

Jquery插件仿百度搜索关键字自动匹配功能

以上就是关于jQuery AutoComplete使用方法介绍,通过完整示例为大家展示jQuery AutoComplete使用效果,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
从vue源码看props的用法
Jan 09 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
You might like
mysql建立外键
2006/11/25 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JavaScript 原型继承
2011/12/26 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python3实现名片管理系统
2020/11/29 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python语言元素知识点详解
2019/05/15 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python接口测试get请求过程详解
2020/02/28 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
如何利用python进行时间序列分析
2020/08/04 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers