当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS中Select下拉列表类(支持输入模糊查询)功能

JS中Select下拉列表类(支持输入模糊查询)功能

2019年03月29日  | 移动技术网IT编程  | 我要评论

下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码，具体代码如下所示：

<span style="font-size:14px;">  <html>    
  <head>    
  <meta http-equiv='content-type' content='text/html; charset=gb2312'>    
  <title>可输入的下拉框</title>    
  </head>    
  <body >    
   <script language="javascript">  
  var j = 0;  
  function selectvalue(obj)  
  {  
    var input = obj.parentnode.nextsibling;  
    document.all.box2.value = obj.options[obj.selectedindex].text;  
    document.getelementbyid("txtsection").value=obj.options[obj.selectedindex].value;  
    alert(document.getelementbyid("txtsection").value);  
  }  
  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<src.length;i++){  
          var selvalue = document.createelement("div");  
          var seltext = 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 (var i=0; i<src.length; 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 (var i=0; i<src.length; 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)  
  {  
    var currsel = document.all.box2.value;  
    for (var i=0;i<src.length;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';  
  }  
   </script>  
   <table border=0 cellpadding=1 cellspacing=0 width="100%">  
     <tr>   
     <td width="24%"><font face="arial" size="2">section</font></td>  
     <td colspan=3 width="76%">   
  <div style="position:relative;">    
  <span style="margin-left:230px;width:18px;overflow:hidden;">   
  <select style="height: 22px; width: 250px; margin-left:-232px;" onchange="selectvalue(this)" onclick="selmatch(this)" id="selectoption" name="selectoption" >    
   <option value='all' selected>all</option>  
  <option value='0test1'>0test1 = testing 1  
  <option value='0test1'>0test2 = testing 1  
  <option value='0test1'>0test3 = testing 1  
  <option value='section'>section = section description xxxxx aaa  
  </option>   
  </select></span>  
  <input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="inputvalue(this)" onblur="nomsg()" onfocus="this.select();inputvalue(this)" value="0" >    
  <div id="msg" style="border:1px solid green; font-size :14px;white-space:nowrap;overflow:hidden;  
  width:230px;position:absolute;left:0px;top:20px;display:none"></div>  
  </div>  
    <input type="hidden" name="txtsection" id="txtsection">  
     </td>  
    </tr>  
    </table>  
  <p>  
  </body>
</html>  
</span>

以上所述是小编给大家介绍的js中select下拉列表类(支持输入模糊查询)功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网