原文地址:使用jquery做搜索引擎效果作者:Hope

当用户输入电话号码的时候,会自动出现提示。类似于google搜索引擎效果,

之前用javascript写过一个,但是目前使用jquery更为简单。

[[转载]使用jquery做搜索引擎效果](http://photo.blog.sina.com.cn/showpic.html#blogid=6c7cb6070100o5gx&url=http://s8.sinaimg.cn/orignal/49f4857046aa2e8bed467&690)

代码如下:

 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 = $(“

“).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 = $(““).html(phoneno).css(“fontSize”, “12px”)
.css(“margin”, “5 5 5 5”);
var td2 = $(““).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();  
        }                
    });  
}