autocomplete实现百度搜索自动填充特效

作者:林炜贤来源:www.163css.com发表时间:(2012-10-02)

 我们先看一个图:

对于这个图,大家想必每天都在用,但有没有想过如何实现呢?对于百度这个自动填充的功能,我们用JQ的插件也是可以实现的人,但也只是类似,百度强大的功能,我还是理解不了啊。。。

我们这里必须采用一个插件,jquery.autocomplete.min.js,大家可以先百度了解下。。。

首先我们要实现的是搜索框的外表,在CSS里,百度通过一个背景图,实现了类似阴影的效果,按钮点击的时候,加上一个样式名btn_h,通过这个样式名,换上背景图。。。

这是我们的数据源,我记得有高手是采用json格式来写的,那样写入的数据多一点啊。。

上面的参数,你看得懂吗?不行就百度吧,好多人有介绍的。。

以下是我制作的效果截图:

像不像啊?点击一下:

真是好玩,想想,前端技术还是值得深入啊。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/10/autocom/index.html

下载地址:autocomplete实现百度搜索自动填充特效.zip

返回作者主页:www.163css.com阅读 (4708)
更多 1