这里介绍一个jquery实现搜索关键字自动匹配提示方法。jquery autocomplete 是一个基于jquery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容ie 6.0+, ff 2+, safari 2.0+, opera 9.0+, and chrome 1.0+ 等主流浏览器。
演示效果:http://devbridge.com/projects/autocomplete/jquery/#demo
下面是具体的使用方法:
1,使用设置
首页,要把插件的js代码嵌入到你自己的项目中去。
2,使用方法
为要实现自动匹配提示的 input 表单添加 autocomplete 功能。
初始化 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,设置表现样式