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实现点击链接取消跳转效果的方法
Jan 24 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
PHP页面间传递参数实例代码
2008/06/05 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP中header用法小结
2016/05/23 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
Array对象方法参考
2006/10/03 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
动态创建类实例代码
2009/10/07 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python实现超级玛丽游戏
2020/03/18 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python实现手势识别
2020/10/21 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
旅行社各个岗位职责
2014/03/15 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
优质服务口号
2014/06/11 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
婚庆答谢词大全
2015/09/29 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Python制作动态字符画的源码
2021/08/04 Python