类似百度搜索的输入框自动完成功能

　　自动完成功能是指：类似百度搜索之类的输入一个词的一部分后就自动提示，然后用户可以选择，不需要再输入剩余部分。

　　废话不多说，直观的看一下：

View Code

<%@ 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前端的利器，有机会的话，大家一定要看一下。