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

最新推荐文章于 2024-09-03 15:58:58 发布

hanchuang213

最新推荐文章于 2024-09-03 15:58:58 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端--小技能

本文链接：https://blog.youkuaiyun.com/hanchuang213/article/details/54861172

Web前端--小技能专栏收录该内容

8 篇文章

订阅专栏

该示例展示了一个HTML下拉框，通过JavaScript实现输入框模糊查询功能。当用户在输入框中输入文字时，会显示匹配的下拉选项，并支持使用上下箭头导航和回车键选择。选中的项将自动填充到输入框和隐藏字段中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>