欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-20 10:26:16
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示:

下面给大家分享一段代码关于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下拉列表类(支持输入模糊查询)功能,希望对大家有所帮助