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

更新时间：2020-04-21 00:38:52 作者：startmvc

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

本文实例为大家分享了支持输入模糊查询的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>

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