JS Select下拉框(支持输入模糊查询)
本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>Inserttitlehere</title> <ScriptLanguage="Javascript"> functionSelectValue(obj) { document.all.box2.value=obj.options[obj.selectedIndex].text; } varj=0; 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> </head> <body> <TABLEborder=0cellPadding=1cellSpacing=0width="100%"> <TR> <TDwidth="24%"><fontface="Arial"size="2">查询</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"> <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> <inputname="box2"id="box2"style="width:230px;position:absolute;left:0px;"onkeyup="InputValue(this)"onblur="NoMsg()"onfocus="this.select();InputValue(this)"value=""> <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> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。