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);    }}