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 相关文章推荐
js 编写规范
Mar 03 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
基于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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
网上抓的一个特效
2007/05/11 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python的setattr函数实例用法
2020/12/16 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
法律专业求职信
2014/05/24 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
会计求职简历自我评价
2015/03/10 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
入党转正介绍人意见
2015/06/03 职场文书
家长通知书家长意见
2015/06/03 职场文书
遗失证明范文
2015/06/19 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python