js 自動補全

js 代碼
//---------------------------------------------------自動補全begin--------------------------------
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
var flagThis = 0;
var flag = 0; //標示是不是選擇自動補全
//自動補全方法
function zdbq(obj){
var id = obj.id;
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");//初始化默許選擇第1個數據
                  
                  //當單擊某個ＬＩ時反應
                  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⑴;
  }
              jQuery("#autoTxt li").css("background", "#FFFFFF");
              jQuery("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
  }else if(40==v){//下鍵
  if(thisCount<maxcount⑴){
                  ++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>

在input中使用

onkeyup="zdbq(this);" 

只要在后臺封裝成json對象就好了 詳細代碼就不展現了，只說1下封裝json代碼

JSONArray arr=new JSONArray();

Object[] obj = new Object[]{名稱,id}; //名稱和id傳遞到前臺
arr.add(obj);