js 文本框自动补全功能，异步加载数据，调试成功的

前台：

var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
var flagThis = 0;
var flag = 0; //标示是否选择自动补全
var zdbqid;
  $(function(){
  $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;z-index:9999' id='autoTxt'></div>");
   //键盘按键移动事件上键38,下键40,确定键13
   $("body").keyup(function(even){
   var id = zdbqid+"_txt";
   var v = even.which;
   if(38==v){//上键
   if(thisCount>0){
   --thisCount;
   }else{
   thisCount = maxcount-1;
   }
             $("#autoTxt li").css("background", "#FFFFFF");
             $("#autoTxt li:eq("+thisCount+")").css("background", "#3b5998");
   }else if(40==v){//下键
   if(thisCount<maxcount-1){
     ++thisCount;
   }else{
   thisCount = 0;
   }
               $("#autoTxt li").css("background", "#FFFFFF");
               $("#autoTxt li:eq("+thisCount+")").css("background", "#3b5998");
   }else if(8==v){//删除键BackSpace BackSpace
   var text = $("#"+id).val();
   var title = $("#"+id).attr("title");
   if(text && text.length>0){
   var lastChar = text.substring(text.length-1,text.length);
   if(lastChar=="," || lastChar=="，" || lastChar=="、"){
  text = text.substring(0,text.length-1);
   }
   if(text.length < title.length){//去掉不完整对象
  var comp = $("#"+id).attr("comp");
       var compobj,compvalue,comptxt;
         if(comp && comp!=""){
        compobj = eval("({"+comp+"})");
        compvalue = compobj.value;
        comptxt = compobj.text;
         }


             compobj.value = compvalue.substring(0,compvalue.lastIndexOf(","));
             compobj.text = comptxt.substring(0,comptxt.lastIndexOf("、"));


           $("#"+id).attr("title",compobj.text);
               $("#"+zdbqid).val(compobj.value);//放入id
               comp =  JSON.stringify(compobj);
               $("#"+id).attr("comp",comp.substring(1,comp.length-1));
   }
   }
     }else if(13==v){//确定键
    flag = 1; //标示是否选择自动补全
         var jgname=$("#"+thisCount).text();//获取名称
         var fid = $("#autoTxt span:eq("+thisCount+")").text();//获取id
         //判断选择是多选还是唯一选择
         var isMultiple = false;//是否进行多值多次匹配
         var comp = $("#"+id).attr("comp");
     var compobj,compvalue,comptxt;
       if(comp && comp!=""){
      compobj = eval("({"+comp+"})");
     if(compobj.maxSize && parseInt(compobj.maxSize) > 1){
   isMultiple = true;
   }
      compvalue = compobj.value;
      comptxt = compobj.text;
       }


     if(isMultiple && compvalue){
             if(compvalue.indexOf(""+fid) <0){
             compobj.value = (compvalue && compvalue.length>0)?compvalue+","+fid:fid;
             compobj.text = (comptxt && comptxt.length>0)?comptxt+"、"+jgname:jgname;
             }
             }else{
             compobj.value = fid;
             compobj.text = jgname;
             }


           if(compobj.text!=""){
           $("#"+id).val(compobj.text);//放入名称
           $("#"+id).attr("title",compobj.text);
             }
             if(compobj.value!=""){
               $("#"+zdbqid).val(compobj.value);//放入id
             }
             comp =  JSON.stringify(compobj);
             $("#"+id).attr("comp",comp.substring(1,comp.length-1));
           $("#autoTxt").html("");
           $("#autoTxt").hide();
   }else {
   if($("#autoTxt").html()!=""){
                  thisCount=0;
              }
    }
   }
   );
  });
  function obtainInfo(key,type,even){
 zdbqid = key;
 var id = key+"_txt";
 //div的宽度更控件宽度一样
      document.getElementById("autoTxt").style.width= document.getElementById(""+id).style.width;
 var v = even.which;
 //回车键：13；上键38；下键40// 当点击上下键或者确定键时阻止他传送数据
 if (v == 38 || v == 40 || v == 13){
    return;
 }
 var txt = $("#"+id).val();//这里是取得他的输入框的值
 txt = txt.replace("/^\n+|\n+$/g","");//去掉末尾的空格换行
 //判断选择是多选还是唯一选择
 var isMultiple = false;//是否进行多值多次匹配
 var comp = $("#"+id).attr("comp");
 var compobj,compvalue,comptxt;
 if(comp && comp!=""){
 compobj = eval("({"+comp+"})");
 if(compobj.maxSize && parseInt(compobj.maxSize) > 1){
 isMultiple = true;
 }
 compvalue = compobj.value;
 comptxt = compobj.text;
 }
 var oldTxt = txt;
 txt = checkIllegalChar(txt);
 var arr = txt.split("、");
 if(isMultiple && arr.length > 1){
 txt= arr[arr.length-1];
 }else if(arr.length > 1){
 alert("只能输入一个");
 return false;
 }
 if (txt != "") {


 $.ajax({
         url : "/collaboration.do?method=autocompleter&type="+type+"&textValue="+encodeURIComponent(encodeURIComponent(txt)),//从后台取得json数据
         success : function(data) {
  if(data.length <=0) return;
         var arr = data.split(",");
         maxcount = arr.length;
         flagThis = 1;
             var offset = $("#"+id).offset();//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
             $("#autoTxt").show();
             $("#autoTxt").css("top", (offset.top + 22) + "px");
             $("#autoTxt").css("left", offset.left + "px");
             var Candidate = "";
              for(var i=0;i<arr.length;i++){
              var nn=arr[i].split("#@#");
                Candidate += "<li style='list-style:none' id='"+i+"'>"+nn[0]+"</li><span id='hhh' style=display:none >"+nn[1]+"</span>";
              }
             $("#autoTxt").html(Candidate);
             $("#autoTxt li:eq(0)").css("background", "#3b5998");//初始化默认选择第一个数据


             //当单击某个ＬＩ时反映
             $("#autoTxt li").click(function(){
             flag = 1;//标示是否选择自动补全
             var jgname=$("#autoTxt li:eq("+this.id+")").text();//获取名称
             var fid = $("#autoTxt span:eq("+thisCount+")").text();//获取id
             if(isMultiple && compvalue){
             if(compvalue.indexOf(""+fid) <0){
             compobj.value = (compvalue && compvalue.length>0)?compvalue+","+fid:fid;
             compobj.text = (comptxt && comptxt.length>0)?comptxt+"、"+jgname:jgname;
             }
             }else{
             compobj.value = fid;
             compobj.text = jgname;
             }
             comp =  JSON.stringify(compobj);
             $("#"+id).attr("comp",comp.substring(1,comp.length-1));
             $("#"+id).attr("title",compobj.text);
             $("#"+id).val(compobj.text);//放入名称
             $("#"+key).val(compobj.value);//放入id
             $("#autoTxt").html("");
             $("#autoTxt").hide();
              });
                 //移动对象
             $("#autoTxt li").hover(function(){
             $("#autoTxt li").css("background", "#FFFFFF");
             $("#autoTxt li:eq("+this.id+")").css("background", "#3b5998");
             thisCount=this.id;
             },function(){
             $("#autoTxt li").css("background", "#FFFFFF");
                  });
         }
 });


 }else{
 $("#autoTxt").html("");
         $("#autoTxt").hide();
         maxcount = 0;
 }
  }


  /**
   * 将输入的多信息字符串特殊字符换成“、”
   *
   * @param obj
   * @return
   */
  function checkIllegalChar(val) {
  if (val) {
  val =val.replace(/,/g,'、');
  val =val.replace(/，/g,'、');
  }
  return val;
  }

后台传出的字符串格式为：名称#@#类型|id，名称#@#类型|id