基于JQUERY制作的仿GOOGLE自动完成插件

    数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}  

JS代码:

/**//*       
 * jQuery AutoComplete       
 *       
 * Author: cntlis       
 * http://blog.csdn.net/cntlis       
 *       
 * Licensed like jQuery, see http://docs.jquery.com/License       
 *       
 * 作者：cntlis       
 * QQ：8112857       
 */       
$.fn.AutoComplete = function(url,option){       
    var me= this;       
    var strKey= $(me).val();       
    var strKeyBak= "";       
    var isShow = false;       
    var doption={       
        iwidth: '0px',    //下拉框的宽度       
        iLengthLower: 1,    //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索       
        iLengthUpper: 50,       
        strPara: "Keyword",    //变量名称       
        zIndex: 1,    //提示框的Z-INDEX值       
        hasscroll: 0,    //是否出现滚动条0无1有       
        hasclose: 1,    //是否拥有关闭窗口       
        desfun:function(){}       
    };       
           
    $.extend(doption,option);           
    var iLengthLower= doption.iLengthLower;       
    var iLengthUpper= doption.iLengthUpper;       
    var strPara= doption.strPara;       
    if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}       
    $("#autocomplete").hide();       
           
    $(me).keyup(function(e){keysearch(e.keyCode);});       
    $(me).keydown(function(e){LineSelect(e.keyCode);});       
    $(me).bind("blur",function(){       
        strKeyBak= $("#autocomplete ul .selected .keyname").text();    //为click事件增加处理       
        if (strKeyBak.length>0 && strKeyBak!=$(me).val()){       
            $(me).val(strKeyBak);       
            doption.desfun();       
        };       
        floorHide();       
    });       
           
    var encode=function(v){//如果包含中文就escape,避免重复escape)       
  return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');       
 }       
           
    function floorHide(){       
        $("#autocomplete").hide().html("");       
        strKey= "";       
        isShow = false;       
    }       
           
    function floorShow(){       
        var p= $(me).offset();       
        var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;       
        $("#autocomplete").css({       
         'z-index:':doption.zIndex,       
         width:w,       
         top:parseInt(p.top+$(me).outerHeight())+"px",       
         left:parseInt(p.left)+"px"       
     }).show();       
        strKey= "";       
        isShow = true;       
    }       
           
    function keysearch(code){       
        var strKeyNow=$(me).val();       
        if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return;    //TAB/回车、ESC、向上、向下       
        if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){       
            $.ajax({       
                type: "Get",       
                dataType: "json",       
                url: url,       
                data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",       
                success: function(json){       
                    jsonjsonjson=json.keylist;       
                    if (json.length>0){       
                        //获取搜索数据       
                        var strContent= "<ul>";       
                        $.each(json, function(i, n){       
                            if(n.keyname.length>0){    //如果       
                                //alert(n.keyname);       
                                strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';       
                                try{       
                                if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}       
                                }catch(E){};       
                                strContent+= '</li>';       
                            };       
                        });       
                        if (doption.hasclose==1){       
                            strContent+= '<li class="close"><span>关闭</span></li>';       
                        }       
                        strContent+='</ul>';       
                        $("#autocomplete").html(strContent);       
                        $("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});       
                        floorShow();       
                    }else{       
                        //没有搜索数据       
                        floorHide();       
                        return;       
                    }       
                }       
            });       
            strKey=$(me).val();       
        }       
        if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();       
    }       
           
    function LineSelect(code){       
        if(code == 27){floorHide();};//回车键、ESC键       
        if(code == 13){floorHide();doption.desfun();};       
        if(!isShow) return;       
        ObjSelected=$("#autocomplete ul .selected");       
        if (ObjSelected.length>0){    //如果已经有选定       
            //alert('dasfdas');       
            if(code == 38){    //向上键       
                if(ObjSelected.prev().text() != ""){    //如果不是第一个数据       
                    ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");       
                    $(me).val($("#autocomplete ul .selected .keyname").text());       
                }else{       
                    ObjSelected.removeClass("selected").addClass("unselected");       
                    $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");       
                    $(me).val($("#autocomplete ul .selected .keyname").text());       
                }       
            }else if (code == 40){    //向下键       
                if(ObjSelected.next().text() != ""){    //如果不是第一个数据       
                    ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");       
                    $(me).val($("#autocomplete ul .selected .keyname").text());       
                }else{       
                    ObjSelected.removeClass("selected").addClass("unselected");       
                    $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");       
                    $(me).val($("#autocomplete ul .selected .keyname").text());       
                }       
            }       
        }else if(code == 38){       
                $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");       
                $(me).val($("#autocomplete .keyinfo:last .keyname").text());       
        }else if(code == 40){       
                $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");       
                $(me).val($("#autocomplete .keyinfo:first .keyname").text());       
        }       
    }       
}   

CSS代码:

#autocomplete{}{ border: 1px solid #000; position: absolute; }       
/**//*每行的格式*/       
#autocomplete li{}{ display: block; text-align: left; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; }       
/**//*鼠标选中时的格式*/       
#autocomplete .selected{}{ background-color: #565da9; color: #fff; overflow: hidden; }       
/**//*鼠标离开时代格式*/       
#autocomplete .unselected{}{ background-color: #fff; color: #666; }       
/**//*关键字信息*/       
#autocomplete .keyname{}{ display: block; float: left; }       
/**//*关键字扩展信息*/       
#autocomplete .keyextend{}{ display: block; float: rightright; color: green; }       
#autocomplete .unselected .keyextend{}{ color: green; }       
#autocomplete .selected .keyextend{}{ color: #fff; }       
/**//*关闭*/       
#autocomplete .close{}{ text-align: rightright; }       
#autocomplete .close span{}{ color: blue; cursor: pointer; text-decoration: underline; }      

调用范例

$("#Keyword").AutoComplete("search.asp");

 

只是search.asp返回的数据要是上面所提供的格式，对于PHP来说就太方便了，只要生成相应的数组，然后json_encode一下就全出来了