基于jquery实现的类似百度搜索的输入框自动完成功能_jquery_脚本之家

先看客户端的HTML:复制代码 代码如下:

废话不多说,直观的看一下:

请输入关键词

搜索词自动完成

实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。

服务端的代码,我们这里选择JSP,也可以使用PHP,服务端无所谓,关键是传送数据。
复制代码 代码如下: 0?json.length; json +=
“]”; System.out.println; out.println; } } %>
整个过程思路其实挺清晰的,首先在输入框上注册keyup事件,然后在事件中通过ajax获取json对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件。键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置。
JQuery是web前端的利器,有机会的话,大家一定要看一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章