<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> <TR> <TD><font face="Arial" size="2">查询</font></TD> <TD COLSPAN=3> <div> <span> <select onchange="SelectValue(this)" > <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 onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="" > <div> </div> </div> <Input Type="Hidden"> </TD> </TR> </TABLE> </body> </html>
JS Select下拉框(支持输入模糊查询)
内容版权声明：除非注明，否则皆为本站原创文章。