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

【WEB前端开发】基于jquery实现的类似百度搜索的输入框自动完成功能_jquery

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

  先看客户端的HTML:

复制代码 代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



搜索词自动完成






请输入关键词





服务端的代码,我们这里选择JSP,也可以使用PHP,服务端无所谓,关键是传送数据。
复制代码 代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String []words = {"amani","abc","apple","abstract","an","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"};
if(request.getParameter("search-text") != null) {
String key = request.getParameter("search-text");
if(key.length() != 0){
String json="[";
for(int i = 0; i < words.length; i++) {
if(words[i].startsWith(key)){
json += "\""+ words[i] + "\"" + ",";
}
}
json = json.substring(0,json.length()-1>0?json.length()-1:1);
json += "]";
System.out.println("json:" + json);
out.println(json);
}
}
%>

整个过程思路其实挺清晰的,首先在输入框上注册keyup事件,然后在事件中通过ajax获取json对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件。键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置。
JQuery是web前端的利器,有机会的话,大家一定要看一下。