[转载]使用jquery做搜索引擎效果

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

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

之前用javascript写过一个，但是目前使用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 = $(“

“).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 = $(““)
                    .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();                 }                           });         } donate 感谢鼓励 / Old blog / PV UV Drive by Hexo On GitHub Theme AirCloud The value of a man resides in what he gives and not in what he is capable of receiving. 一个人的价值，在于他贡献了什么，而不在于他能得到什么。