JS中Select下拉列表类(支持输入模糊查询)功能
程序员文章站
2022-06-20 16:48:08
下面给大家分享一段代码关于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下拉列表类(支持输入模糊查询)功能，希望对大家有所帮助