杰晶网络

JS中Select下拉列表类(支持输入模糊查询)功能
网络编程 2024/5/19 佚名
3 2

下面给大家分享一段代码关于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下拉列表类(支持输入模糊查询)功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
select下拉列表
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接