基于jquery实现的自动补全功能
本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下：
$(function(){
//自动补全
varmaxcount=0;//表示他最大的值
varthisCount=0;//初始化他框的位置
$("body").prepend("<divstyle='width:120px;display:none;background:#FFFFFF;position:absolute;'id='autoTxt'></div>");
$("#sele").keyup(function(even){
varv=even.which;
if(v==38||v==40||v==13)//当点击上下键或者确定键时阻止他传送数据
{
return;
}
vartxt=$("#sele").val();//这里是取得他的输入框的值
if(txt!=""){
//拼装数据
$.ajax({
url:"Birthday_autoCompletion",//从后台取得json数据
type:"post",
dataType:"json",
data:{"bir.userName":txt
},
success:function(ls){
varoffset=$("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top",(offset.top+30)+"px");
$("#autoTxt").css("left",offset.left+"px");
varCandidate="";
maxcount=0;//再重新得值
$.each(ls,function(k,v){
Candidate+="<liid='"+maxcount+"'>"+v+"</li>";
maxcount++;
});
$("#autoTxt").html(Candidate);
$("#autoTxtli:eq(0)").css("background","#A8A5A5");
//高亮对象
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//当单击某个ＬＩ时反映
$("#autoTxtli").click(function(){
$("#sele").val($("#autoTxtli:eq("+this.id+")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxtli").hover(function(){
$("#autoTxtli").css("background","#FFFFFF");
$("#autoTxtli:eq("+this.id+")").css("background","#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxtli").css("background","#FFFFFF");});
},
error:function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
maxcount=0;
}
});
}else{
$("#autoTxt").hide();
maxcount=0;
$("#sestart").click();
}
});
//当单击ＢＯＤＹ时则隐藏搜索值
$("body").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
//写移动事件//上键３８下键４０确定键１３
$("body").keyup(function(even){
varv=even.which;
if(v==38)//按上键时
{
if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
$("#sele").blur();
if(thisCount>0)
--thisCount;
else
thisCount=0;
$("#autoTxtli").css("background","#FFFFFF");
$("#autoTxtli:eq("+thisCount+")").css("background","#A8A5A5");
}else{$("#sele").focus();}
}elseif(v==40){//按下键时
if(thisCount<maxcount-1)
{
$("#sele").blur();
++thisCount;
$("#autoTxtli").css("background","#FFFFFF");
$("#autoTxtli:eq("+thisCount+")").css("background","#A8A5A5");
}
}elseif(v==13){//按确认键时
vartt=$("#"+thisCount).text();
if(tt!="")
{
$("#sele").val(tt);
$("#autoTxt").html("");
$("#autoTxt").hide();
}else
{
if($("#sele").val()!="")
$("#sestart").click();
}
}else{
if($("#autoTxt").html()!="")
{
$("#sele").focus();
thisCount=0;
}
}
});
});
希望本文所述对大家的jQuery程序设计有所帮助。