jquery 输入框 根据输入内容检索 下拉提示

jsp页面代码：

<%@ page language="java" pageEncoding="UTF-8"%>



   

jQuery实例：输入框下拉提示，仿google suggest

 

后台servlet代码：

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

public class AutoComplete extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

     doPost(request,response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

   //表示页面传过来的字符串，用来和服务器端的单词进行匹配
   String word = request.getParameter("word");
  
   //将字符串保存在request对象中
   request.setAttribute("word", word);
  
   //将请求转发给视图层
   request.getRequestDispatcher("wordxml.jsp").forward(request, response);

}

}

 

在web.xml中配置servlet：

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

   AutoComplete
   AutoComplete


   AutoComplete
   /AutoComplete

 

 

 

存放数据的jsp，模拟后台传来的数据，不是用来显示的：

<%@ page contentType="text/xml; charset=UTF-8" language="java" %>

<%
String word = (String)request.getAttribute("word");
%>

   <%if("absolute".startsWith(word)){%>
      absolute
   <%}%>
      <%if("anyone".startsWith(word)){%>
      anyone
   <%}%>
      <%if("anything".startsWith(word)){%>
      anything
   <%}%>
      <%if("apple".startsWith(word)){%>
      apple
   <%}%>
      <%if("abandon".startsWith(word)){%>
      abandon
   <%}%>
      <%if("breach".startsWith(word)){%>
      breach
   <%}%>
      <%if("boolean".startsWith(word)){%>
      boolean
   <%}%>
      <%if("break".startsWith(word)){%>
      break
   <%}%>
      <%if("create".startsWith(word)){%>
      create
   <%}%>

最后，最最重要的JavaScript代码：

var highlightindex = -1; //定义高亮显示索引
var timeOutId; //定义延迟时间

$(document).ready(function(){

    var wordInput = $("#word");
    var wordInputOffset = wordInput.offset();
   
    //隐藏自动补全框,并定义css属性
    $("#auto").hide()
              .css("position","absolute")
              .css("border","1px black solid")
              .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
              .css("left",wordInputOffset.left + "px")
              .width(wordInput.width() + 2);
   
   
    //给文本框添加键盘按下并弹起的事件
    wordInput.keyup(function(event){
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        var autoNode = $("#auto");
        if(keyCode >= 65 && keyCode <=90 || keyCode == 8 || keyCode == 46){
        //输入字母,退格或删除,显示最新的内容
          var wordText = $("#word").val();
          if(wordText != ""){
                 timeOutId = setTimeout(function(){
             $.post("AutoComplete",{word:wordText},function(data){
                  var jqueryObj = $(data);
                  var wordNodes = jqueryObj.find("word");
                  autoNode.html("");
                  wordNodes.each(function(i){
                      var wrodNode = $(this);
                      var newDivNode = $("

").attr("id",i);
                      newDivNode.html(wrodNode.text()).appendTo(autoNode);
                      //添加光标进入事件,高亮节点
                      newDivNode.mouseover(function(){
                          if(highlightindex != -1){
                              $("#auto").children("div")
                                        .eq(highlightindex)
                                        .css("background-color","white");
                          }
                          highlightindex = $(this).attr("id");
                          $(this).css("background-color","gray");
                      });
                     
                      //添加光标移出事件,取消高亮
                      newDivNode.mouseout(function(){
                          $(this).css("background-color","white");
                      });
                     
                      //添加光标点击事件
                      newDivNode.click(function(){
                    var comText = $(this).text();
                    $("#auto").hide();
                    highlightindex = -1;
                    $("#word").val(comText);
                      });
                  });
                  if(wordNodes.length > 0){
                      autoNode.show();
                  }else{
                     autoNode.hide();
                     highlightindex = -1;
                  }
                 
             },"xml");
        },500);
     }else{
         autoNode.hide();
         highlightindex = -1;
     }
    }else if(keyCode == 38){
    //输入向上,选中文字高亮
         var autoNodes = $("#auto").children("div")
         if(highlightindex != -1){
             autoNodes.eq(highlightindex).css("background-color","white");
             highlightindex--;
         }else{
             highlightindex = autoNodes.length - 1;
         }
        
         if(highlightindex == -1){
             highlightindex = autoNodes.length -1;
         }
         autoNodes.eq(highlightindex).css("background-color","gray");
    }else if(keyCode == 40){
    //输入向下,选中文字高亮
         var autoNodes = $("#auto").children("div")
         if(highlightindex != -1){
             autoNodes.eq(highlightindex).css("background-color","white");
         }
         highlightindex++;
         if(highlightindex == autoNodes.length){
             highlightindex = 0;
         }
         autoNodes.eq(highlightindex).css("background-color","gray");      
        
    }else if(keyCode == 13){
    //输入回车
         if(highlightindex != -1){
             var comText = $("#auto").hide().children("div").eq(highlightindex).text();
             highlightindex = -1;
             $("#word").val(comText);
         }else{
             alert("文本框中的[" + $("#word").val() + "]被提交了！");
             $("#auto").hide();
             $("#word").get(0).blur();
         }
    }
    });
   
   
    //给按钮添加事件，表示文本框中的数据被提交
    $("#bt_sub").click(function(){
        alert("文本框中的[" + $("#word").val() + "]被提交了！");
    });
   
});