jquery实现仿google自动补齐

js文件：

//var autoNode = $("#auto")是错误的，因为在外边只能声明变量，不能初始化变量
//因为即使初始化了变量也是不好使的
var autoNode;
var wordNode; //文本框
var autoChildNodes;
var highlightindex = -1;//文本框高亮显示的元素的索引，-1表示没有高亮元素，0则表示第一元素高亮，1表示第二个元素高亮，以此类推
//设置成-1是因为在数组列表div中，第一个元素索引是0
$(document).ready(function(){
wordNode = $("#word");
autoNode = $("#auto");
autoNode.hide();
// css("border","1px black solid");
// .css("position","absolute")
// .css("top",offset.height + wordNode.height)
// .css("left",offset.left)
// .css("height",offset.height);;

//处理文本框中的键盘事件
$("#word").keyup(function(event){
//判断用户按下的是哪个键
var myEvent = event || window.event;
var keycode = myEvent.keyCode;
//判断用户按下的键是否是小写 “a” 到 大写 "Z"
if(keycode >= 65 && keycode <= 90 || keycode == 8 || keycode == 46)//8,46是del键和backspace键，也要向服务器发送数据
{
//1.首先获取id为word的文本框中的内容
var wordText = $("#word").val();
if(wordText != ""){
//2.向服务器发送数据，并接受返回数据，对之进行处理
$.post("AutoComplete",{word:wordText},function(data){
//在处理新接受的数据时，把上一次的内容要清空
autoNode.html("");
//3.1将dom对象转化为jquery对象
var jqueryObj = $(data);
//3.2找到所有的word节点
var wordNodes = jqueryObj.find("word");
//3.3遍历所有的word节点，取出单词内容，并把每个节点追加到id为auto的div中
wordNodes.each(function(i){
//4.1取出单词内容
var text = $(this).text();

//4.2新创建一个div节点,并设置节点的内容
var divNode = $("<div>").attr("id",i);
divNode.html(text);
//4.3把新建的div节点追加到对话框中
divNode.appendTo(autoNode);
//找到所有符合条件的auto节点的<div>子节点
autoChildNodes = $("#auto").children("div");
//鼠标进入事件
divNode.mouseover(function(){
if(highlightindex != -1)
{ autoChildNodes.eq(highlightindex).css("background","white");

}
$(this).css("background","red");
highlightindex = i;

});
//鼠标滑出事件
divNode.mouseout(function(){
$(this).css("background","white");
highlightindex = -1;
});
//鼠标点击事件,是click函数，而不是onclick函数
divNode.click(function(){

var clicktext = $(this).html();
wordNode.val(clicktext);
autoNode.hide();
highlightindex = -1;
alert("数据" + clicktext +"被发送！");

});

});

var offset = $("#word").offset();
autoNode.show()
.css("border","1px black solid")
.css("position","absolute")
.css("top",offset.top + wordNode.height()+4)
.css("left",offset.left)
.css("width",wordNode.width()+2);
},"xml");
}else{
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}
}else if(keycode == 38 || keycode == 40 ){ //判断用户按下的是否是向上键（38），还是向下键（40）

if(keycode == 38)
{//用户按的是向上的键头
if(highlightindex == -1)
{
highlightindex = autoChildNodes.length-1;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
if(highlightindex == 0)
{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex= autoChildNodes.length-1
}
else
{
highlightindex--;
}

}
autoChildNodes.eq(highlightindex).css("background","red");
}
else if(keycode == 40)
{//用户按的是向下的键头

if(highlightindex == autoChildNodes.length-1)
{
autoChildNodes.eq(highlightindex).css("background","white")
highlightindex = 0;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex++;
}
autoChildNodes.eq(highlightindex).css("background","red");
}
}
else if(keycode == 13)
{//用户按下的是回车键

//下拉框有高亮内容
if(highlightindex != -1)
{
var text = autoChildNodes.eq(highlightindex).html();
wordNode.val(text);
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
alert("数据" + text +"被发送！" );

}
else
{
alert("数据" + wordNode.val()+"被发送！" );
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}

//下拉框没有高亮内容
}
});
//给按钮添加事件，因为button没有id属性，所以可以
// 通过$("input[type='button']")的方法来访问到该节点
$("input[type='button']").click(function(){
alert("数据"+ $("#word").val()+"被提交！");
});
});

servlet文件：

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

/**
* Created by IntelliJ IDEA.
* User: lucky
* Date: 2009-8-19
* Time: 13:51:46
* To change this template use File | Settings | File Templates.
*/
public class AutoComplete extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doPost(httpServletRequest, httpServletResponse);
}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
//？？？将字符床保存在request对象中
httpServletRequest.setAttribute("word",word);
//将请求转发给视图层，（注意在Ajax中，视图层并不返回页面，只返回数据，所以也可称为数据层）
httpServletRequest.getRequestDispatcher("wordxml.jsp")
.forward(httpServletRequest, httpServletResponse);
}
}

word.jsp数据文件：

<%--
Created by IntelliJ IDEA.
User: lucky
Date: 2009-8-19
Time: 14:01:13
To change this template use File | Settings | File Templates.
--%>
<!-- 因为是数据层，所以这里contentType的类型是text/xml-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String word = request.getParameter("word");
%>
<words>

<%

if("absolute".startsWith(word)){

%>

<word>absolute</word>
<%
}
%>

<%
if("abstarct".startsWith(word)){

%>
<word>abstarct</word>
<%
}
%>

<%
if("anyone".startsWith(word)){

%>
<word>anyone</word>

<%
}
%>

<%
if("anything".startsWith(word)){

%>
<word>anything</word>

<%
}
%>

<%
if("anywhere".startsWith(word)){

%>
<word>anywhere</word>

<%
}
%>

<%
if("brank".startsWith(word)){

%>
<word>brank</word>
<%
}
%>

<%
if("break".startsWith(word)){

%>
<word>break</word>
<%
}
%>

<%
if("blank".startsWith(word)){

%>
<word>blank</word>

<%
}
%>
</words>

html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自动补全实例</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word"/>
<input type="button" value="提交"/><br/>
<div id="auto"></div>
</body>
</html>