基于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(); //当单击某个LI时反映 $("#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时则隐藏搜索值 $("body").click(function(){ $("#autoTxt").html(""); $("#autoTxt").hide(); thisCount=0; }); //写移动事件//上键38下键40确定键13 $("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程序设计有所帮助。