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

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

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

效果如图

完整的JS代码如下

  1/**//*
  2 * jQuery AutoComplete
  3 *
  4 * Author: cntlis
  5 * http://blog.csdn.net/cntlis
  6 *
  7 * Licensed like jQuery, see http://docs.jquery.com/License
  8 *
  9 * 作者：cntlis
 10 * QQ：8112857
 11 */
 12$.fn.AutoComplete = function(url,option){
 13    var me= this;
 14    var strKey= $(me).val();
 15    var strKeyBak= "";
 16    var isShow = false;
 17    var doption={
 18        iwidth: '0px',    //下拉框的宽度
 19        iLengthLower: 1,    //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
 20        iLengthUpper: 50,
 21        strPara: "Keyword",    //变量名称
 22        zIndex: 1,    //提示框的Z-INDEX值
 23        hasscroll: 0,    //是否出现滚动条0无1有
 24        hasclose: 1,    //是否拥有关闭窗口
 25        desfun:function(){}
 26    };
 27    
 28    $.extend(doption,option);    
 29    var iLengthLower= doption.iLengthLower;
 30    var iLengthUpper= doption.iLengthUpper;
 31    var strPara= doption.strPara;
 32    if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}
 33    $("#autocomplete").hide();
 34    
 35    $(me).keyup(function(e){keysearch(e.keyCode);});
 36    $(me).keydown(function(e){LineSelect(e.keyCode);});
 37    $(me).bind("blur",function(){
 38        strKeyBak= $("#autocomplete ul .selected .keyname").text();    //为click事件增加处理
 39        if (strKeyBak.length>0 && strKeyBak!=$(me).val()){
 40            $(me).val(strKeyBak);
 41            doption.desfun();
 42        };
 43        floorHide();
 44    });
 45    
 46    var encode=function(v){//如果包含中文就escape,避免重复escape)
 47  return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
 48 }
 49    
 50    function floorHide(){
 51        $("#autocomplete").hide().html("");
 52        strKey= "";
 53        isShow = false;
 54    }
 55    
 56    function floorShow(){
 57        var p= $(me).offset();
 58        var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;
 59        $("#autocomplete").css({
 60         'z-index:':doption.zIndex,
 61         width:w,
 62         top:parseInt(p.top+$(me).outerHeight())+"px",
 63         left:parseInt(p.left)+"px"
 64     }).show();
 65        strKey= "";
 66        isShow = true;
 67    }
 68    
 69    function keysearch(code){
 70        var strKeyNow=$(me).val();
 71        if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return;    //TAB/回车、ESC、向上、向下
 72        if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){
 73            $.ajax({
 74                type: "Get",
 75                dataType: "json",
 76                url: url,
 77                data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
 78                success: function(json){
 79                    json=json.keylist;
 80                    if (json.length>0){
 81                        //获取搜索数据
 82                        var strContent= "<ul>";
 83                        $.each(json, function(i, n){
 84                            if(n.keyname.length>0){    //如果
 85                                //alert(n.keyname);
 86                                strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';
 87                                try{
 88                                if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}
 89                                }catch(E){};
 90                                strContent+= '</li>';
 91                            };
 92                        });
 93                        if (doption.hasclose==1){
 94                            strContent+= '<li class="close"><span>关闭</span></li>';
 95                        }
 96                        strContent+='</ul>';
 97                        $("#autocomplete").html(strContent);
 98                        $("#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);}});
 99                        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文件

 

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

 

调用范例

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

 程序页面生成格式为{'keylist':[{'keyname':'测试数据1','keyextend':'一共有5个结果'},{'keyname':'测试数据2','keyextend':'一共有5个结果'},{'keyname':'测试数据3','keyextend':'一共有5个结果'},{'keyname':'测试数据4','keyextend':'一共有5个结果'},{'keyname':'测试数据5','keyextend':'一共有5个结果'},{'keyname':'测试数据6','keyextend':'一共有5个结果'},{'keyname':'测试数据7','keyextend':'一共有5个结果'},{'keyname':'测试数据8','keyextend':'一共有5个结果'},{'keyname':'测试数据9','keyextend':'一共有5个结果'},{'keyname':'测试数据10'}]}

完整的例子下载

/Files/cntlis/AutoComplete.rar