JS Select下拉框(支持输入模糊查询)

本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下

<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 width="100%">

<TR>

<TD width="24%"><font face="Arial" size="2">查询</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 >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 name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="" >

<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>

</body>

</html>

以上是 JS Select下拉框(支持输入模糊查询) 的全部内容, 来源链接: utcz.com/z/325071.html

回到顶部