下拉框支持输入且可以模糊匹配

最新推荐文章于 2023-07-02 10:35:40 发布

疯狂的小鱼

最新推荐文章于 2023-07-02 10:35:40 发布

阅读量1.8k

点赞数

分类专栏：前端知识

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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.οnmοuseοver=function (){  
      this.style.backgroundColor='#003399';  
      this.style.color ='#ffffff';  
      } 
      selText.οnmοuseοut=function (){  
      this.style.backgroundColor='#ffffff';  
      this.style.color ='#000000'; 
      } 
      selText.οnclick=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;" οnchange="SelectValue(this)" οnclick="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;" οnkeyup="InputValue(this)" οnblur="NoMsg()" οnfοcus="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>

疯狂的小鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
下拉框支持输入且可以模糊匹配

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 tmp
复制链接

扫一扫