一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

JS Select下拉框(支持输入模糊查询)

时间:2017-03-13 编辑:简简单单 来源:一聚教程网

 

    查询

     

   

     

    

      

       

       

       

       

       

       

       

       

      

     

      

     

     width:230px;position:absolute;left:0px;top:20px;display:none">

    

   

   

      

   

  

  

 代码如下 复制代码

Insert title here

 

   

  function SelectValue(obj)

 { 

  document.all.box2.value = obj.options[obj.selectedIndex].text;

 }

  var j = 0;

  function InputValue(obj)

 {

  var n = 1; 

  var tmpObj;

  var src = document.all.SelectOption;

  var msg = document.all.msg;

  if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){

   if(obj.value!=""){

     msg.style.display="";

     msg.innerHTML="";

     if(msg.hasChildNodes()) 

     { 

     msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]); 

     }

       

     for (var i=0;i

     varselValue=document.createElement("div");

     varselText=document.createElement("div");

     selText.value=src(i).value;

     selText.innerHTML=src(i).text;   

   

     if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){ 

      selText.setAttribute("id","selText"+n);

      selText.onmouseover=function(){ 

      this.style.backgroundColor='#003399'; 

      this.style.color='#ffffff'; 

      }

      selText.onmouseout=function(){ 

      this.style.backgroundColor='#ffffff'; 

      this.style.color='#000000';

      }

      selText.onclick=function(){ 

      document.all.box2.value=this.innerHTML;

      msg.style.display="none";

      document.getElementById("txtSection").value=this.value;

      }

      msg.appendChild(selText);

      n++;

     }

     }

   }

   else {

    document.all.msg.style.display="none";

   }

  }

  else {

   //press down key

   if(event.keyCode==40){

    j++;

    for (vari=0; i

    {

     tmpObj=document.getElementById("selText"+i);

     if(tmpObj != null){

      tmpObj.style.backgroundColor='#ffffff'; 

      tmpObj.style.color='#000000';

     }    

    }

    tmpObj=document.getElementById("selText"+j);

    if(tmpObj != null){

     tmpObj.style.backgroundColor='#003399'; 

     tmpObj.style.color='#ffffff'; 

    }else{

     j=0;

    }   

   }

   //press up key

   if (event.keyCode==38){

    j--;

    for (vari=0; i

    {

     tmpObj=document.getElementById("selText"+i);

     if(tmpObj != null){

      tmpObj.style.backgroundColor='#ffffff'; 

      tmpObj.style.color='#000000';

     }    

    }

    tmpObj=document.getElementById("selText"+j);

    if(tmpObj != null){

     tmpObj.style.backgroundColor='#003399'; 

     tmpObj.style.color='#ffffff'; 

    }else{

     j=2;

    }  

   }

   //press enter key

   if (event.keyCode==13){

    tmpObj=document.getElementById("selText"+j);

    document.all.box2.value=tmpObj.innerHTML;

    msg.style.display="none";

    document.getElementById("txtSection").value=tmpObj.value;

   }

  }

 }

    

 function SelMatch(src)

 {

  varcurrSel=document.all.box2.value;

  for (vari=0;i

   if (src(i).text==currSel)

   {

    src.options(i).selected=true;

   }  

  }

 }

   

 function NoMsg()

 { 

  if(document.activeElement.id=="msg") 

   return false; 

  else

   document.all.msg.style.display='none';

 }

   

   

  

   

  

   

   

热门栏目