本文实例为大家分享了
Jquery搜索关键字自动匹配功能
的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+,FF 2+,Safari 2.0+,Opera 9.0+,and Chrome 1.0+ 等主流浏览器。下面是具体的使用方法:
1、使用设置
代码如下:
2、使用方法
为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。
初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。
代码如下:
根据文本表单中的输入信息,进行关键字提示匹配。
代码如下:
jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。
代码如下:
.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 h3 { font-weight:normal; color:#3399FF; }