Ajax模拟百度搜索框的自动补全功能

Auto.js：

var heightlightindex = -1;
var timeout;
$(document).ready(function(){
    var wordinput = $("#word");
    //offset用于文档的偏移坐标
    var inputoffset = wordinput.offset();
    //自动补全的框最开始隐藏起来
    $("#auto").hide().css("border","1px black solid")
        .css("position","absolute")
        .css("top",inputoffset.top+wordinput.height()+10 )
        .css("left",inputoffset.left).width(wordinput.width());
    //给文本框加上按下并谈起的事件
    $("#word").keyup(function(event){
        var myevent = event||window.event;
        var keyCode = myevent.keyCode;
        //如果最新的信息为字母应当发送到服务器端
        if(keyCode >= 65 &&keyCode <= 90 || keyCode ==8|| keyCode ==46) {
            var wordText = $("#word").val();
            if(wordText!=""){
                //定义全局的timeout延迟使得减少和服务器端的交互
                //有效的提高其性能
                    clearTimeout(timeout);
                    timeout = setTimeout(function(){
                    $.post("AutoCompleteServlet", {word: wordText}, function (data) {
                        //将返回的dom对象转化为jquery
                        var jqueryObj = $(data);
                        //找到所有的word节点并遍历
                        var wordNodes = jqueryObj.find("word");
                        var autoNode = $("#auto");

                        //清空原来的内容否则显示的文本框中的内容会越来越多
                        autoNode.html("");

                        wordNodes.each(function (i) {
                            //获取内容
                            var wordNode = $(this);
                            //新建div节点
                            var newDivNode = $("<div>").attr("id",i);
                            newDivNode.html(wordNode.text()).appendTo(autoNode);
                            //将新建的节点加入到弹出框窗口中
                            newDivNode.mouseover(function(){
                                if(heightlightindex != -1 ) {
                                    $("#auto").children("div").eq(heightlightindex)
                                        .css("background-color","white");
                                }
                                heightlightindex = $(this).attr("id");
                                $(this).css("background-color","red");

                            });
                            newDivNode.mouseout(function(){
                                $(this).css("background-color","white");
                            });

                            newDivNode.click(function(){
                                var comText =$(this).text();
                                $("#auto").hide();
                                heightlightindex = -1;
                                //填入文本框
                                $("#word").val(comText);
                            });
                        });
                        if (wordNodes.length > 0) {
                            autoNode.show();
                        } else {
                            autoNode.hide();
                        }
                    }, "xml");
                },500);


            }else{
                $("#auto").hide();
                heightlightindex = -1;
            }
        }else if(keyCode == 38||keyCode == 40){
        //向上向下
            if(keyCode == 38) {//向上
                var autoNodes = $("#auto").children("div");
                if (heightlightindex != -1) {
                    autoNodes.eq(heightlightindex).css("background-color", "white");
                    heightlightindex--;
                }
                else{
                    heightlightindex=autoNodes.length-1;
                }autoNodes.eq(heightlightindex).css("background-color","red");

            }else if(keyCode == 40){
                var autoNodes = $("#auto").children("div");
                if (heightlightindex != -1) {
                    autoNodes.eq(heightlightindex).css("background-color","white");
                }
                heightlightindex++;
                if(heightlightindex==autoNodes.length){
                    heightlightindex=0;
                }autoNodes.eq(heightlightindex).css("background-color","red");
            }
        }else if(keyCode == 13){
            //选中高亮部分
            if(heightlightindex!=-1){
                var comText = $("#auto").children("div").eq(heightlightindex).text();
                $("#auto").hide();
                heightlightindex = -1;
                //填入文本框
                $("#word").val(comText);
            }else{
                alert("文本框的[" + $("#word").val()+"]被提交了");
                $("#auto").hide();
                $("#word").blur();
            }
        }
    });
    //给按钮添加事件表示数据被提交
    $("input[type='button']").click(function(){
        alert("文本框的[" + $("#word").val()+"]被提交了");
    });
});

AutoComplete.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AutoComplete</title>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="jslib/Auto.js"></script>
</head>

<body>
    输入要搜索的字段:<input type="text" id="word" />
    <input type="button" value="提交"/><br/>
    <div id="auto"></div>
</body>

</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>AutoCompleteServlet</servlet-name>
        <servlet-class>AutoCompleteServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>AutoCompleteServlet</servlet-name>
        <url-pattern>/AutoCompleteServlet</url-pattern>
    </servlet-mapping>
</web-app>

提供的词汇库wordxml.jsp:

<%--
  Created by IntelliJ IDEA.
  User: Dqd
  Date: 2016/11/6
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
    String str = request.getParameter("word");
%>
<words>
    <%if("anyone".startsWith(str)){%>
        <word>anyone</word>
    <%}%>
    <%if("anything".startsWith(str)){%>
         <word>anything</word>
    <%}%>
    <%if("absolute".startsWith(str)){%>
        <word>absolute</word>
    <%}%>
    <%if("boolean".startsWith(str)){%>
         <word>boolean</word>
    <%}%>
    <%if("break".startsWith(str)){%>
        <word>break</word>
    <%}%>
</words>

AutoCompleteServlet:

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

/**
 * Created by Dqd on 2016/11/6.
 */
@WebServlet(name = "AutoCompleteServlet")
public class AutoCompleteServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String word = request.getParameter("word");
        System.out.println(word);
        request.setAttribute("word",word);
        request.getRequestDispatcher("wordxml.jsp")
                .forward(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}