JQUERY实现搜索提示

 

var line = 0;
         var sendType;
         function del(){
             if($("#newDiv")){
                 $("#newDiv").remove();
                 line = 0;
             }
         }  
        $(document).ready(function(){
             //文本框失去焦点时层消失
             $(document.body).click(function(){
                 del();
             });          
             $(document).keydown(function(){
                 // 38 上  40下 13 回车
                 if($("#newDiv")){
                     if(event.keyCode == 40){
                         $("table tbody tr").eq(line)
                             .css("backgroundColor", "blue")
                             .css("color", "white");
                         $("table tbody tr").eq(line < 0 ? 0 : line - 1)
                             .css("backgroundColor", "white")
                             .css("color", "black");
                         line = (line == $("table tbody tr").length ? 0 : line + 1);
                     }else if(event.keyCode == 38){
                         line = (line == 0 ? $("table tbody tr").length : line - 1);
                         $("table tbody tr").eq(line)
                             .css("backgroundColor", "blue")
                             .css("color", "white");
                         $("table tbody tr").eq(line > $("table tbody tr").length ? 0 : line + 1)
                             .css("backgroundColor", "white")
                             .css("color", "black");
                     }else if(event.keyCode == 13){
                         $("#phoneno").val($("table tbody tr").eq(line - 1).find("td").eq(0).html());
                         del();
                     }
                 } 
             });
 
 //只要id为phoneno的文本框变化，就调用function()
 
             $("#phoneno").bind("propertychange", function(){           
                 del();          
            var top = $("#phoneno").offset().top;
                 var left = $("#phoneno").offset().left;
                 var newDiv = $("<div/>").width($("#phoneno").width() + 6)
                     .css("position", "absolute")
                     .css("backgroundColor", "white")
                     .css("left", left)
                     .css("top", top + $("#phoneno").height() + 6)
                     .css("border", "1px solid blue")
                     .attr("id", "newDiv");
                  
                 var table = $("<table width='100%'/>")
                     .attr("cellpadding", "0")
                     .attr("cellspacing", "0");                  
             //$.get("xmlPhoneno", {phoneno: $("#phoneno").val()},function(xml){
     $.get("phoneNoInfo.xml", {PhoneNumber: $("#phoneno").val()},function(xml){
 
 //这里调用了后台的xmlController来执行发挥xml。以下为解析xml   
                     $(xml).find("phones phone").each(function(){
                      var phoneno = $(this).attr("phoneno");
                         var sname = $(this).attr("sname");
                          var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
                             $(this).css("backgroundColor", "white").css("color", "black");
                         }).mouseover(function(){
                             $(this).css("backgroundColor", "blue").css("color", "white");
                         }).click(function(){
                             $("#phoneno").val($(this).find("td").eq(0).html());                         
                             del();
                         });
                         var td1 = $("<td/>").html(phoneno).css("fontSize", "12px")
                             .css("margin", "5 5 5 5");                      
                         var td2 = $("<td/>").html(sname)
                         .attr("align", "right").css("fontSize", "12px")
                         .css("color", "green").css("margin", "5 5 5 5");
                           
                         tr.append(td1).append(td2);
                         table.append(tr);
                         newDiv.append(table);                       
                     });
                                       });              
                 $(document.body).append(newDiv);              
                 if($("#phoneno").val() == ""){
                     $("#newDiv").remove();
                 }             
             });
         }