Jquery插件仿百度搜索关键字自动匹配功能

前端之家收集整理的这篇文章主要介绍了Jquery插件仿百度搜索关键字自动匹配功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享

Jquery搜索关键字自动匹配功能

的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+,FF 2+,Safari 2.0+,Opera 9.0+,and Chrome 1.0+ 等主流浏览器。

下面是具体的使用方法

1、使用设置

首页,要把插件的js代码嵌入到你自己的项目中去。

代码如下:

2、使用方法

为要实现自动匹配提示的 input 表单添加 AutoComplete 功能

初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误

代码如下:

根据文本表单中的输入信息,进行关键字提示匹配。

代码如下:

jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。

代码如下:

3、设置表现样式

最后,用div和css美化表现效果
代码如下:
40430421731" class="autocomplete" style="width: 299px;">

Li

beria

Li

byan Arab Jamahiriya

Li

echtenstein
Lithuania
.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; }

4、实例讲解