javascript实现自动补全

网上下载的什么autocomplete 都是 先加载所有的数据在自动补全

数据量大了浏览器加载就会很慢  写个点击自动加载的 而且很简单可以直接套用autoImport 方法 不需要格外的样式 不过要引用jquery的js

//服务器端输出数据 格式定义[{Id:"1",Name:"jiaozi"},{Id:"2",Name:"min"}]

//参数1 为当前文本框的对象

//参数2 为获取数据的路径

//参数3 在一个页面当存在多个文本框需要补全时 唯一标识符 

//参数4 当用户选择了一条数据的回调方法名称
  function autoImport(c,urlPath,divId,huidiao){
 
   if(document.getElementById(divId)!=null){
    var tableV=document.getElementById(divId).getElementsByTagName('table')[0];
     var currentCount=tableV.getAttribute("currentCount");
     if(currentCount==null || typeof(currentCount)=='undefined')
       currentCount=-1;
       else
       currentCount=parseInt(currentCount);
      //这个if表示上 偶数行 background-color:#eeeeee; 选中行 #0a246a
     if(event.keyCode == 38 || event.keyCode == 40){
                 //还原所有的颜色
              for(var i=0;i<tableV.rows.length ;i++){
            if(i%2==1){
              tableV.rows[i].style.background='#eeeeee';
            }
            else{
              tableV.rows[i].style.background='';
            }
             tableV.rows[i].style.color='black';
        }
     if (event.keyCode == 38) {
       
         if(currentCount==0){
           currentCount=currentCount;
         }else{
           currentCount=currentCount-1;
 
         }
            
     }
     //这个if表示下
     if (event.keyCode == 40) {
         if(currentCount==(tableV.rows.length-1)){
           currentCount=currentCount;
         }else{
           currentCount=currentCount+1;
         }
      
     }
     //alert(currentCount);
     tableV.rows[currentCount].style.background='#0a246a';
      tableV.rows[currentCount].style.color='white';
     tableV.setAttribute("currentCount",currentCount);
     return;
     }
     //选择左右
     if (event.keyCode == 39 || event.keyCode == 37) {
        if(currentCount!=-1){
            tableV.rows[currentCount].click();
           //var evt = document.createEvent("MouseEvents");  
           //evt.initEvent("click", true, true);  
           //tableV.rows[currentCount].dispatchEvent(evt);
          
           return;
        }
       
     }
      document.body.removeChild(document.getElementById(divId));
   }
    //通过ajax获取结果
   var result='';
   $.ajax(
     {
        type: "post",
        url: urlPath,
        async:false,
        data:null,
        success:function(msg){
           result=msg;
           if(divId==null)
        divId="divId";
      
      
      try{
        var result=eval("{"+result+"}");
      }catch(e){
       return;
      }
      
      
      //添加失去焦点事件失去焦点关闭div
      /**
      c.onblur=function(){
          if(document.getElementById(divId)!=null){
       document.body.removeChild(document.getElementById(divId));
       }
      }
      **/
      var rwidth=c.offsetWidth;
      
      var ry=c.offsetTop; 
      var rx=c.offsetLeft;  
         
      while(c=c.offsetParent) 
      { 
        ry+=c.offsetTop; 
        rx+=c.offsetLeft; 
      }
         ry=ry+25;
      
      
      var dv= document.createElement("div");
      document.onclick=function(){
      if(document.getElementById(divId)!=null){
            document.body.removeChild(document.getElementById(divId));
         }
      }
      dv.id=divId;
      dv.style.zIndex="2000";
      var htmlDiv="<table style=\"border:1px solid black;border-collapse:collapse;background-color:white\" width=\""+rwidth+"px\" >";
      for(var i=0;i<result.length;i++){
          var vId=result[i].Id;         
       var vName=result[i].Name;
       var vDistict=result[i].District;
       var vDistictName=result[i].DistrictName;
     
       if(i%2==1){
        htmlDiv+="<tr onclick=\""+huidiao+"('"+vId+"','"+vName+"','"+vDistict+"','"+vDistictName+"');document.body.removeChild(document.getElementById('"+divId+"'))\" style=\"FONT-FAMILY: Arial, 宋体; FONT-SIZE: 12px;height:20px;"+rwidth+"\""+
        "onmouseover=\" for(var i=0;i<this.parentNode.parentNode.rows.length ;i++){ if(i%2==1){ this.parentNode.parentNode.rows[i].style.background='#eeeeee'; } else{ this.parentNode.parentNode.rows[i].style.background=''; } this.parentNode.parentNode.rows[i].style.color='black'; } ;this.style.background='#0a246a';this.style.color='white';this.parentNode.parentNode.setAttribute('currentCount',"+i+")\""+
        "onmouseout=\"this.style.background='';this.style.color='black'\"><td>"+vName+
        "</td></tr>";
       }else{
        htmlDiv+="<tr onclick=\""+huidiao+"('"+vId+"','"+vName+"','"+vDistict+"','"+vDistictName+"');document.body.removeChild(document.getElementById('"+divId+"'))\" onmouseover=\" for(var i=0;i<this.parentNode.parentNode.rows.length ;i++){ if(i%2==1){ this.parentNode.parentNode.rows[i].style.background='#eeeeee'; } else{ this.parentNode.parentNode.rows[i].style.background=''; } this.parentNode.parentNode.rows[i].style.color='black'; } ;this.style.background='#0a246a';this.style.color='white';this.parentNode.parentNode.setAttribute('currentCount',"+i+")\"onmouseout=\"this.style.background='#eeeeee';this.style.color='black'\" style=\"FONT-FAMILY: Arial, 宋体;FONT-SIZE: 12px;background-color:#eeeeee;height:20px;"+rwidth+"\"><td >"+vName+"</td></tr>";
       }
      }
      htmlDiv+="</table>";
      dv.innerHTML=htmlDiv;
      dv.style.top=ry;
      dv.style.left=rx;
      dv.style.width=rwidth;
      dv.style.position="absolute";
      document.body.appendChild(dv);
         
 }});

   

  }

action方法

public String toSyncEnt() {


try {
String result=InitList.getEntString(CommonUtils.decodeStr(entName));
ServletActionContext.getResponse().setContentType("text/html; charset=UTF-8");
ServletActionContext.getResponse().getWriter().print(result);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;

}

InitList

public static String getEntString(String name) {
List<EnterPriceInfo> epis = getEntList();
String str = "[";
for (int i = 0; i < epis.size() && i<=11; i++) {
EnterPriceInfo epi = epis.get(i);
if (name==null || epi.getEnterPriceName().contains(name))
str += "{Id:'" + epi.getEnterPriceId()
+ "',Name:'" + epi.getEnterPriceName()
+ "'},";
}
str = str.substring(0, str.length() - 1);
str += "]";
return str;
}

html页面调用

 <INPUT id="scqy" onclick="autoImport('<%=path %>/entAjax/toSyncEnt.do?entName='+encodeStr(this.value),'div11')"  name="medInfo.productName" style="95%" value="${medInfo.productName}">
          

这里未设置回调方法 默认方法为：

function valueToCtl(Id,Name){
     //在页面定义这个方法 
  }