JS中Select下拉列表类(支持输入模糊查询)功能
程序员文章站
2023-11-20 10:26:16
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示:
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示:
<span style="font-size:14px;"> <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 = 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); } 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> <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 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 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" style="width:230px;position:absolute;left:0px;" onkeyup="inputvalue(this)" onblur="nomsg()" onfocus="this.select();inputvalue(this)" value="0" > <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> <p> </body> </html> </span>
以上所述是小编给大家介绍的js中select下拉列表类(支持输入模糊查询)功能,希望对大家有所帮助
上一篇: php实现数组筛选奇数和偶数示例