JS中Select下拉列表类（⽀持输⼊模糊查询）功能下⾯给⼤家分享⼀段代码关于select下拉列表类⽀持输⼊模糊查询功能的实现代码，具体代码如下所⽰：
<span >  <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 = Sibling;
document.all.box2.value = obj.options[obj.selectedIndex].text;
ElementById("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].veChild(msg.childNodes[0]);
}
for (var i=0;i<src.length;i++){
var selValue = ateElement("div");
var selText = ateElement("div");
selText.value = src(i).value;
selText.innerHTML = src(i).text;
if (src(i).LowerCase().indexOf(LowerCase())==0){
selText.setAttribute("id","selText"+n);
this.style.backgroundColor='#003399';
lor ='#ffffff';
}
this.style.backgroundColor='#ffffff';
lor ='#000000';
}
document.all.box2.value = this.innerHTML;
msg.style.display="none";
制作查询类小程序
}
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 = ElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
lor ='#000000';
}
}
tmpObj = ElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
lor ='#ffffff';
}else{
j = 0;
}
}
//press up key
if (event.keyCode==38){
j--;
for (var i=0; i<src.length; i++)
{
tmpObj = ElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
lor ='#000000';
}
}
tmpObj = ElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
lor ='#ffffff';
}else{
j = 2;
}
}
//press enter key
if (event.keyCode==13){
tmpObj = ElementById("selText"+j);
document.all.box2.value = tmpObj.innerHTML;
msg.style.display="none";
}
}
}
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 >
<span >
<select 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" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" >      <div id="msg" ></div>
</div>
<Input Type="Hidden" Name="txtSection" id="txtSection">
</TD>
</TR>
</TABLE>
<p>
</BODY>
</HTML>
</span>
以上所述是⼩编给⼤家介绍的JS中Select下拉列表类(⽀持输⼊模糊查询)功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。