JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码，具体代码如下所示：
<spanstyle="font-size:14px;"><HTML>
<HEAD>
<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY>
<ScriptLanguage="Javascript">
varj=0;
functionSelectValue(obj)
{
varinput=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);
}
functionInputValue(obj)
{
varn=1;
vartmpObj;
varsrc=document.all.SelectOption;
varmsg=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(vari=0;i<src.length;i++){
varselValue=document.createElement("div");
varselText=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{
//pressdownkey
if(event.keyCode==40){
j++;
for(vari=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;
}
}
//pressupkey
if(event.keyCode==38){
j--;
for(vari=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;
}
}
//pressenterkey
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;
}
}
}
functionSelMatch(src)
{
varcurrSel=document.all.box2.value;
for(vari=0;i<src.length;i++){
if(src(i).text==currSel)
{
src.options(i).selected=true;
}
}
}
functionNoMsg()
{
if(document.activeElement.id=="msg")
returnfalse;
else
document.all.msg.style.display='none';
}
</Script>
<TABLEborder=0cellPadding=1cellSpacing=0width="100%">
<TR>
<TDwidth="24%"><fontface="Arial"size="2">Section</font></TD>
<TDCOLSPAN=3width="76%">
<divstyle="position:relative;">
<spanstyle="margin-left:230px;width:18px;overflow:hidden;">
<selectstyle="HEIGHT:22px;WIDTH:250px;margin-left:-232px;"onchange="SelectValue(this)"onclick="SelMatch(this)"id="SelectOption"name="SelectOption">
<OPTIONvalue='ALL'Selected>ALL</OPTION>
<OPTIONvalue='0TEST1'>0TEST1=Testing1
<OPTIONvalue='0TEST1'>0TEST2=Testing1
<OPTIONvalue='0TEST1'>0TEST3=Testing1
<OPTIONvalue='SECTION'>SECTION=SectionDescriptionXXXXXAAA
</OPTION>
</select></span>
<inputname="box2"id="box2"style="width:230px;position:absolute;left:0px;"onkeyup="InputValue(this)"onblur="NoMsg()"onfocus="this.select();InputValue(this)"value="0">
<divid="msg"style="border:1pxsolidgreen;font-size:14PX;white-space:nowrap;overflow:hidden;
width:230px;position:absolute;left:0px;top:20px;display:none"></div>
</div>
<InputType="Hidden"Name="txtSection"id="txtSection">
</TD>
</TR>
</TABLE>
<p>
</BODY>
</HTML>
</span>
以上所述是小编给大家介绍的JS中Select下拉列表类(支持输入模糊查询)功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！