下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
js 代码 //---------------------------------------------------自动补全begin-------------------------------- var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 var flagThis = 0; var flag = 0; //标示是否选择自动补全 //自动补全方法 function zdbq(obj){ var id = obj; document.getElementById("zdbqid").value = id; jQuery("#"+id).keyup(function(even) { document.getElementById("autoTxt").style.width= 214+"px"; var v = even.which; //回车键:13;上键38;下键40// 当点击上下键或者确定键时阻止他传送数据 if (v == 38 || v == 40 || v == 13){ return; } var txt = jQuery("#"+id).val();//这里是取得他的输入框的值 if (txt != "") { jQuery.ajax({ url : "xxx_xxx.action",//从后台取得json数据 type : "post",dataType : "json",data : {"name" : txt },success : function(ls) { flagThis = 1; var offset = jQuery("#"+id).offset();//offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。 jQuery("#autoTxt").show(); jQuery("#autoTxt").css("top",(offset.top + 22) + "px"); jQuery("#autoTxt").css("left",offset.left + "px"); var Candidate = ""; maxcount = 0;//再重新得值 var list=eval(ls); jQuery.each(list,function(k,v) { var nn=(v+"").split(","); Candidate += "<li style='list-style:none' id='"+maxcount+"'>"+nn[0]+"</li><span id='hhh' style=display:none >"+nn[1]+"</span>"; maxcount++; }); jQuery("#autoTxt").html(Candidate); jQuery("#autoTxt li:eq(0)").css("background","#A8A5A5");//初始化默认选择第一个数据 //当单击某个LI时反映 jQuery("#autoTxt li").click(function(){ flag = 1;//标示是否选择自动补全 var jgname=jQuery("#autoTxt li:eq("+this.id+")").text();//获取名称 var fid = jQuery("#autoTxt span:eq("+thisCount+")").text();//获取id jQuery("#"+id).val(jgname);//放入名称 $("#jcid").val(fid);//放入id jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); }); //移动对象 jQuery("#autoTxt li").hover(function(){ jQuery("#autoTxt li").css("background","#FFFFFF"); jQuery("#autoTxt li:eq("+this.id+")").css("background","#A8A5A5"); thisCount=this.id;},function(){ jQuery("#autoTxt li").css("background","#FFFFFF");}); },error : function() { jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); maxcount = 0; } }); } else { jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); maxcount = 0; } } ); //=====================自动补全公共部分开始================================= //当单击BODY时则隐藏搜索值 jQuery("body").click(function(){ jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); thisCount=0; }); } //键盘选择 jQuery(function(){ //键盘按键移动事件上键38,下键40,确定键13 jQuery("body").keyup( function(even){ var id = document.getElementById("zdbqid").value; var v = even.which; if(38==v){//上键 if(thisCount>0){ --thisCount; }else{ thisCount = maxcount-1; } jQuery("#autoTxt li").css("background","#FFFFFF"); jQuery("#autoTxt li:eq("+thisCount+")").css("background","#A8A5A5"); }else if(40==v){//下键 if(thisCount<maxcount-1){ ++thisCount; }else{ thisCount = 0; } jQuery("#autoTxt li").css("background","#A8A5A5"); }else if(13==v){//确定键 flag = 1; //标示是否选择自动补全 var jgname=jQuery("#"+thisCount).text();//获取名称 var fid = jQuery("#autoTxt span:eq("+thisCount+")").text();//获取id if(jgname!=""){ jQuery("#"+id).val(jgname);//放入名称 } if(fid!=""){ $("#jcid").val(fid);//放入id } jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); }else { if(jQuery("#autoTxt").html()!=""){ thisCount=0; } } } ); }); //---------------------------------------------------自动补全end-------------------------------- body里面需要写的代码 <!-- 自动补全用到的 --> <!-- 存放名称的id --> <input type="hidden" value="" name="zdbqid" id="zdbqid"/> <!-- 显示的div --> <div style="width:180px; z-index:99999999; display:none; background:#FFFFFF; position: absolute;" id="autoTxt"></div> 在body中使用 onload="zdbq('自动补全input的id');" 只要在后台封装成json对象就行了 详细代码就不展示了,只说一下封装json代码 JSONArray arr=new JSONArray(); Object[] obj = new Object[]{名称,id}; //名称和id传递到前台 arr.add(obj);
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。