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