模仿 google 自动补全 实现

var selectIndex = -1;
var setTimeoutId ;
$(function (){
    var autoDiv = $("#autoDiv");
    init(autoDiv);
    $("#searchInfo").keyup(function (event){
        var myEvent =  event || window.event ;
        var keyCode =  myEvent.keyCode ;

        if(( keyCode >= 65 && keyCode <= 90 ) || keyCode ==8 || keyCode ==46){
          if($("#searchInfo").val() != ""){
            sendServer(autoDiv);
          }else{
             autoDiv.html("");
             autoDiv.hide();
          }
        }else if(keyCode == 38 || keyCode == 40){
          selectInfo(keyCode,autoDiv)
        }else if(keyCode ==13){
          commitSelectInfo(autoDiv);
        }
    });
});
function init(autoDiv){
    var searchInfoOffset = $("#searchInfo").offset();
    autoDiv.css("border","1px black solid")
            .css("position","absolute")
            .css("top",searchInfoOffset.top+$("#searchInfo").height()+7+"px")
            .css("left",searchInfoOffset.left+"px")
            .css("background-color","white").css("color","black")
            .width($("#searchInfo").width()+4);
    autoDiv.hide();
}
function sendServer(autoDiv){
      var text =  $("#searchInfo").val();
      clearTimeout(setTimeoutId);
      setTimeoutId =  setTimeout(
        function (){
          $.post("/AutoCompletServlet", {searchInfo:text}, function(data) {
          var jqueryObj = $(data);
          var returnNodes = jqueryObj.find("word");
          autoDiv.html("");
          returnNodes.each(function (i) {
              var node = $(this);
              var autoDivNode = $("<div>");
              autoDivNode.attr("id",i).html(node.text()).appendTo(autoDiv);

              autoDivNode.mouseover(function (){
                    if(selectIndex != -1 && selectIndex > 0){
                     autoDiv.children("div").eq(selectIndex).css("background-color","white").css("color","black");
                    }
                    selectIndex = $(this).attr("id");
                    autoDivNode.css("background-color","#3366CC").css("color","white");
              });

             autoDivNode.mouseout(function (){
                  autoDivNode.css("background-color","white").css("color","black");
             });

              autoDivNode.click(function (){
                  $("#searchInfo").val($(this).text());
                  selectIndex = -1;
                  autoDiv.html("").hide();
              });
          });
          if (returnNodes.length > 0)autoDiv.show(); else autoDiv.hide();
      },"xml");},700);

}
function selectInfo(keyCode,autoDiv){
    var autoDivNodes = autoDiv.children("div");
    if(keyCode == 38){
        if(selectIndex != -1){
           autoDivNodes.eq(selectIndex).css("background-color","white").css("color","black");
           selectIndex--;
        }else{
            selectIndex =  autoDivNodes.length - 1;
        }
        if(selectIndex == -1){
             selectIndex =  autoDivNodes.length - 1;
        }
        autoDivNodes.eq(selectIndex).css("background-color","#3366CC").css("color","white");
    }
    if(keyCode == 40){
        if(selectIndex != -1){
           autoDivNodes.eq(selectIndex).css("background-color","white").css("color","black");
        }
        selectIndex++;
        if(selectIndex == autoDivNodes.length){
             selectIndex =  0;
        }
        autoDivNodes.eq(selectIndex).css("background-color","#3366CC").css("color","white");
    }
}
function commitSelectInfo(autoDiv){
    if(selectIndex != -1){
        var comtext = autoDiv.children("div").eq(selectIndex).text();
        $("#searchInfo").val(comtext);
        autoDiv.hide();
        autoDiv.html("");
        selectIndex = -1;
    }else{
        //alert($("#searchInfo").val()+"commit");
        $("#searchForm").submit();
        autoDiv.hide();
        $("#searchInfo").blur();
        selectIndex = -1;
    }
}