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);</pre>