JQuery自动补全

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>页面的自动补全</title> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.js"> </script>  
 <script type="text/javascript" src="js/jquertAutoFill.js"></script> 
  </head>
 
  <body>
    请输入你想查找的内容:<input type="text" id="word"/>
    <input type="button" value="提交"/><br />
   
    <div id="auto"></div>
  </body>
</html>

//jquery自动补全

//定义全局变量
var highlightindex = -1;  //表示高亮的节点
var timeoutId;    //表示延時向服务器发送请的时间

/*Ajax 自动补全*/
//注册页面装在时执行的方法
$(document).ready(function () {
 //得到文本框对象
 var wordInput = $("#word");
  
 //得到文本框距离屏幕左边距和上边的距离
 var wordInputOffset = wordInput.offset();
 
 //自动补全框最开始隐藏起来
 //添加样式必须现价 css("position","absolute")属性
 $("#auto").hide().css("border", "1px black solid").css("position", "absolute").css("top", wordInputOffset.top + wordInput.height() + 6 + "px").css("left", wordInputOffset.left + "px").width(wordInput.width() + 2);
 
 //给文本框添加键盘按下并弹起的事件
 $("#word").keyup(function (event) {
  //处理文本框中的键盘事件
  //得到弹出框对象
  var autoNode = $("#auto");
  //得到当前按键的code值
  var myEvent = event || window.evnet;
  var keyCode = myEvent.keyCode;
  
  //如果输入的是字母,应该将文本框最新的信息发送给服务器
  //如果输入的是退格键或删除键,也应该将文本框的信息发送给服务器
  if (keyCode >= 65 || keyCode <= 90 || keyCode == 8 || keyCode == 46) {
   //1、首先获取文本框的内容
   var wordText = $("#word").val();
   //文本内容不为空才将文本框内容发给服务器
   if (wordText != "") {
    //2、将文本框的内容发给服务器
    //对上次未执行的延时做清除操作
    clearTimeout(timeoutId);
    //对服务器端进行交互延迟500ms,避免快速打字造成的频繁请求
    timeoutId = setTimeout(function(){
     $.post("AutomaticFillServlet", {word:wordText}, function (data) {
     //将dom对象data转换成JQuery的对象
     var jqueryobj = $(data);
     //找到所有word节点
     var wordNodes = jqueryobj.find("word");
     //遍历所有的word节点,取出单词内容,然后将单词内容添加到弹出框中
     //清空div里原来的内容
     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(highlightindex != -1){
        $("#auto").children("div").eq(highlightindex).css("background-color","white");
       }
       //记录新的高亮节点
       highlightindex =  $(this).attr("id");
       $(this).css("background-color","red");
      });
      //鼠标移出,取消高亮
      newDivNode.mouseout(function(){
       //取消节点的高亮
       $(this).css("background-color","white");
      });
      //鼠标补全
      newDivNode.click(function(){           
       //文本框的内容变成高亮显示的内容
       $("#word").val($(this).text());
       
       //隐藏弹出窗体
       $("#auto").hide();
      });
     });
     //如果服务服务器端有数据,则显示弹出框
     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等于零的情况单独拿出来处理
    if(highlightindex == 0){
     highlightindex = autoNodes.length - 1;
    }else{
     highlightindex--;
    }   
   }else{
    highlightindex = autoNodes.length - 1;
   }
   
   //让现在高亮的内容变成红色
   autoNodes.eq(highlightindex).css("background-color","red");
  }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","red");
  }else if (keyCode == 13) {
   //如果输入的是回车
   
   if(highlightindex != -1){
    //取出高亮显示下拉框的内容
    var comText = $("#auto").hide().children("div").eq(highlightindex).text();
    //文本框的内容变成高亮显示的内容
    $("#word").val(comText);
    
    highlightindex = -1;
   }else{
      var obj = $("#word");
      var count = obj.val();
    obj.val("");
    alert("文本框中的[" + count + "]被提交了");
    
    //让文本框失去焦点
    obj.get(0).blur();
   }   
  }
 });
 
 //给按钮添加事件,表示文本框中的数据被提交
 $("input[type='button']").click(function () {
  alert("\u6587\u672c\u6846\u4e2d\u7684[" + $("#word").val + "]\u88ab\u63d0\u4ea4\u4e86");
 });
});

package serverlet;

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

/**
 * 自动补全
 * 向客服端返XML数据的servlet
 * @author Administrator
 *
 */
@SuppressWarnings("serial")
public class AutomaticFillServlet extends HttpServlet {

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

 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
 {
  //获得页面传过来的字符串
  String word = request.getParameter("word");
  
  //将字符串保存在request对象中
  request.setAttribute("word",word);
  
  //将请求转发给视图层(注意Ajax中,这个所谓的视图层不返回页面,只返回数据,所以也可以称作是一个数据层)
  //将"wordxml.jsp"处理后的数据发给 "JqueryAutoComplete.html"页面
  request.getRequestDispatcher("wordxml.jsp").forward(request, response);
 }

 public void init() throws ServletException
 {
  
 }
 public void destroy()
 {
  super.destroy();
 }
}

wordxml.jsp

<%--
 自动补全的Ajax实例
--%>
<%@ page contentType="text/xml; charset=UTF-8" language="java" %>
<!-- 返回xml数据的“视图层”暂时不做任何逻辑判断,先将所有的单词都返回、待前后台应用可以完整的协作后,在限制返回的内容 -->
<%
 //页面端传送的字符串
 String word = (String)request.getParameter("word");
%>
<words>
 <%if("absolute".startsWith(word)){%>
  <word>absolute</word>
 <%
   }
   if("anyone".startsWith(word)){
 %>
  <word>anyone</word>
 <%
   }
   if("anything".startsWith(word)){
 %>
  <word>anything</word>
 <%
    }
    if("apple".startsWith(word)){
 %>
  <word>apple</word>
 <%
    }
    if("abandin".startsWith(word)){
 %>
  <word>abandin</word>
 <%
    }
    if("breach".startsWith(word)){
 %>
  <word>breach</word>
 <%
   }
   if("break".startsWith(word)){
    %>
  <word>break</word>
 <%
    }
    if("bad".startsWith(word)){
 %>
  <word>bad</word>
 <%}%>
</words>

相关推荐