test

//表示当前高亮的节点
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("left",wordInputOffset.left + "px")
     .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
     .width(wordInput.width() + 4);
 
 //给文本框添加键盘按下并弹起的事件
 wordInput.keyup(function()
 {
  //如果输入的内容不为空，刚将数据发送给服务器
  if(wordInput.val() == "" ) 
  {
   //当框隐藏时，高亮框的索引值应为-1,表示没有高亮显示的
   heightLightIndex = -1;
   $("#auto").hide();
   return;
  }
  var keyCode = event.keyCode;
  
  //如果输入的是向上38向下40键刚将选中的内容赋值给输入框
  if(wordInput.val() != "" && (keyCode == 38 || keyCode == 40))
  {
   //alert("sdfdsf");
   if(keyCode == 38)
   {
    //向上
    var autoNodes = $("#auto").children("div");
    if(heightLightIndex != -1)
    {
     autoNodes.eq(heightLightIndex).css("background-color","white");
    }
    //改变要高亮显示的节点的索引值
    if(heightLightIndex == 0)
    {
     //如果修改索引值以后index变为-1，则将索引值指向最后一个元素
     heightLightIndex = autoNodes.length - 1;     
    }
    else
    {
     heightLightIndex--;
    }
    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");
    }
    //改变要高亮显示的节点的索引值
    if(heightLightIndex == autoNodes.length - 1)
    {
     //如果修改索引值以后index变为-1，则将索引值指向最后一个元素
     heightLightIndex = 0;     
    }
    else
    {
     heightLightIndex++;
    }
    autoNodes.eq(heightLightIndex).css("background-color","red");
   }
   return;
  }
  else if(keyCode == 13)
  {
   //如果按下的是回车键
   
   $("#auto").hide();
   //下拉框有高亮内容
   if(heightLightIndex != -1)
   {
    var comText = $("#auto").children("div").eq(heightLightIndex).text();
    heightLightIndex = -1;
    $("#word").val(comText);
   }
   else
   {
    //下拉框没有高亮内容  
    alert("数据[" + $("#word").val() + "]正在搜索,请稍后.....");
    
    //让文本框失去焦点
    $("#word").get(0).blur();
   }   
   return;
  }
  
  
  //1.首先获取文本框中的内容
  var wordText = $("#word").val();
  //对上次未完成的延时操作进行取消
  clearTimeout(timeoutId);
  
  //将和服务器进行操作延迟500毫秒
  timeoutId = setTimeout(function(){
  //2.将文本框的内容发送给服务器
  $.post("AutoComplete",{word:wordText},function(data){
   //将dom对象输入成JQuery对象
   var jqueryObj = $(data);
   //找到所有的word节点
   var wordNodes = jqueryObj.find("word");
   //遍历所有的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 = $("#auto").children("div").eq(heightLightIndex).text();
     heightLightIndex = -1;
     //$("#word").val(wordNode.text());
     $("#word").val($(this).text());
     $("#auto").hide();
    });
   });
   //让弹出框进行显示(当服务器端有数据返回的时候)
   if(wordNodes.length > 0)
   {
    $("#auto").show();
   }
   else
   {
    //当框隐藏时，高亮框的索引值应为-1,表示没有高亮显示的
    heightLightIndex = -1;
    $("#auto").hide();
   }
  },"xml");
 });},500);
  
 
 //给搜索按钮添加单击事件
 $("input[type='button']").click(function(){
  alert("数据[" + $("#word").val() + "]正在搜索,请稍后.....");
 });
});