jquery ajax 实现谷歌搜索效果

完成的功能 如：

 第步一新建一个web工程：autoCompleteStart

二 向工程新添搜索页面 如：

JQueryAutoComplete.html

 
   
   
    
 
 
 
  
   

   

 

三  新建一个servlert    com.test.autocom.sAutoComplete.java 

package com.test.autocom;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class AutoComplete extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  String world = request.getParameter("world");
  request.setAttribute("world", world);
  //在Ajax的请求当中它不返回一个页面，只返回它所请求的数据，所以也可以称作为数据层
  request.getRequestDispatcher("worldxml.jsp").forward(request, response);
 }

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

}
四  配置web.xml

 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
    This is the description of my J2EE component
    This is the display name of my J2EE component
    AutoCompleteStart
    com.test.autocom.AutoComplete
 
 
 
   AutoComplete
    com.test.autocom.AutoComplete
 

 
    AutoCompleteStart
    /autoCompleteStart
 
 
   AutoComplete
    /AutoComplete
 
 
    index.jsp
 

新建一个worldxml.jsp页面用于返回 定义查询数据的内容

<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<%
 String word = (String)request.getAttribute("world");
%>

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

在webRoot目录下新建一个Jslib目录并在这个目录拷入jquery.js使用jquery必须的文件

在这个目录下新建jqueryauto.js   这个js文件里面完成js的触发方法的操作内容如下：

//用于定位键盘上下时，保证返回的数据条有光亮的部分
var heightLightIndex = -1;
var timeoutid;
$(document).ready(function(){
 var wordInput = $('#word');
 var wordInputOffset = wordInput.offset();
 $('#auto').hide().css("border","1px black solid").css("position","absolute")
  .css("top",wordInputOffset.top+wordInput.height()+5+"px")
  .css("left",wordInputOffset.left+"px").width(wordInput.width()+2+"px");
 //给文本添加键盘按下并弹起的事件
 
 wordInput.keyup(function(event){
  var myEvent = event || window.event;
  var keyCode =myEvent.keyCode;
  //8，46是退格键和删除键
  if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
   var worldText = $('#word').val();
   if(worldText != ""){
    //取消上次未完成都的延迟操作
    clearTimeout(timeoutid);
    
    timeoutid = setTimeout(function(){
     
     $.post("AutoComplete",{world:worldText},function(data){
      var jqueryObj = $(data);
      var worldNodes = jqueryObj.find("world");
      var autoNode = $('#auto');
      autoNode.html("");
      //each中的第一参数就是所遍历这个数组的下标
      worldNodes.each(function(i){
       var wordNode = $(this);
       var newDivNode = $('

').attr("id",i);
       newDivNode.html(wordNode.text()).appendTo(autoNode);;
       newDivNode.mouseover(function(){
        if(heightLightIndex != -1){
         $('#auto').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 newDivNodeText = $(this).text();
        heightLightIndex = -1;
        $("#word").val(newDivNodeText);
        $('#auto').hide();
       });
      });
      if(worldNodes.length>0){
       $('#auto').show();
      }else{
       $('#auto').hide();
       heightLightIndex = -1;
      }
     },"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");
   }
   //向下 键
   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 contentText = $('#auto').hide().children("div").eq(heightLightIndex).text();
    heightLightIndex = -1;
    $("#word").val(contentText)
   }else{
    alert("文本框中的["+$("#word").val()+"]被提交了");
    $('#auto').hide();
    //在某个节点上get(0)返回本来的dom对象 在dom对象上让文本失去焦点
    $("#word").get(0).blur();
    
   }
  }
 });
 $("input[type='button']").click(function(){
  alert("文本框中的["+$("#word").val()+"]被提交了");
 });
});