javascript实现自动补全

来源：互联网发布：javascript void 编辑：程序博客网时间：2024/05/10 14:11

网上下载的什么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;width:"+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;width:"+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="width:95%" value="${medInfo.productName}">

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

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