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实现tr元素的上下移动示例代码
Dec 20 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
angular异步验证防抖踩坑实录
Dec 01 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中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python实现word2Vec model过程解析
2019/12/16 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
公司经营目标责任书
2015/01/29 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
运动会三级跳加油稿
2015/07/21 职场文书