本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下：复制代码代码如下:$(function() {// 自动补全var maxcount = 0;// 表示他最大的值var thisCount =0;// 初始化他框的位置$("body").prepend("");$("#sele").keyup(function(even) {var v = even.which;if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据{return;}var txt = $("#sele").val();//这里是取得他的输入框的值if (txt != "") {//拼装数据$.ajax({url : "Birthday_autoCompletion",//从后台取得json数据type : "post",dataType : "json",data : {"bir.userName" : txt},success : function(ls) {var offset = $("#sele").offset();$("#autoTxt").show();$("#autoTxt").css("top", (offset.top + 30) + "px");$("#autoTxt").css("left", offset.left + "px");var Candidate = "";maxcount = 0;//再重新得值$.each(ls, function(k, v) {Candidate += "" + v + "";maxcount++;});$("#autoTxt").html(Candidate);$("#autoTxt li:eq(0)").css("background", "#A8A5A5");//高亮对象$('body').highLight();$('body').highLight($("#sele").val());event.preventDefault();//当单击某个ＬＩ时反映$("#autoTxt li").click(function(){$("#sele").val($("#autoTxt li:eq("+this.id+")").text());$("#autoTxt").html("");$("#autoTxt").hide();});//移动对象$("#autoTxt li").hover(function(){$("#autoTxt li").css("background", "#FFFFFF");$("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");thisCount=this.id;},function(){$("#autoTxt li").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) {var v = even.which;if (v == 38)// 按上键时{if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点$("#sele").blur();if(thisCount>0)--thisCount;else thisCount=0;$("#autoTxt li").css("background", "#FFFFFF");$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");}else{$("#sele").focus();}} else if (v == 40) {// 按下键时if(thisCount{$("#sele").blur();++thisCount;$("#autoTxt li").css("background", "#FFFFFF");$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");}} else if (v == 13) {// 按确认键时var tt=$("#"+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程序设计有所帮助。
基于jQuery的AJAX和JSON的实例 中文WORD版本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看下载