js 自动补全

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");//初始化默认选择第一个数据                                        //当单击某个ＬＩ时反映                    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;        }    }        );    //=====================自动补全公共部分开始=================================    //当单击ＢＯＤＹ时则隐藏搜索值    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", "#FFFFFF");                jQuery("#autoTxt li:eq("+thisCount+")").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);
热门搜索

js 自动补全
