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>