基于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一下就全出来了