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

本文实例为大家分享了支持输入模糊查询的Select下拉框，供大家参考，具体内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
 <Script Language="Javascript"> 

  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<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>
</head>
<body> 

  <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">
   <TR>
    <TD width="24%"><font face="Arial" size="2">查询</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 >ALL</OPTION>
       <OPTION >管理者1</OPTION>
       <OPTION >管理者2</OPTION>
       <OPTION >管理者3</OPTION>
       <OPTION >业务员3</OPTION>
       <OPTION >业务员3</OPTION>
       <OPTION >13</OPTION>
       <OPTION >103</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="" >
     <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> 

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。