当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery实现搜索关键字自动匹配提示方法

Javascript
javaScript 数值型和字符串型之间的转换
从父页面读取和操作iframe中内容方法
IE DOM实现存在的部分问题及解决方法
jqPlot Option配置对象详解
jquery JSON的解析方式
JavaScript 捕获窗口关闭事件
xml 封装与解析(javascript和C#中)
JavaScript 设计模式学习 Singleton
JavaScript 设计模式学习 Factory
javascript CSS画图之基础篇
JavaScript 获取事件对象的注意点
JavaScript Konami Code 实现代码
Google Map API更新实现用户自定义标注坐标
JavaScript this 深入理解
javascript EXCEL 操作类代码
window.parent调用父框架时 ie跟火狐不兼容问题
关于取不到由location.href提交而来的上级页面地址的解决办法
JS input 数字验证代码
网页全屏显示代码说明分析
JS 学习笔记 防止发生命名冲突

Javascript 中的 jQuery实现搜索关键字自动匹配提示方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 630 ::
收藏到网摘: n/a

在现在的Web设计中,提高用户体验是企业最为注重的内容之一。在搜索表单中,根据输入的部分内容进行关键字匹配提示功能,就是最直观和常用的交互体验,类似功能已经被多数的互联网网站应用。例如Google的搜索框效果如下:

jQuery 搜索关键字自动匹配提示插件

这里介绍一个jQuery实现搜索关键字自动匹配提示方法。jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器。

演示效果http://www.devbridge.com/projects/autocomplete/jquery/#demo

下面是具体的使用方法:

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; }

jQuery AutoComplete 插件官方链接

插件介绍: www.devbridge.com/projects/autocomplete/jquery/

插件下载: www.devbridge.com/projects/autocomplete/jquery/#download

这里还有一种基于MooTools框架的关键字自动匹配提示方法:

MooTools: www.ajaxdaddy.com/mootools-autocomplete.html