JS Select下拉框(支持输入模糊查询)
程序员文章站
2022-06-14 08:33:42
本文实例为大家分享了支持输入模糊查询的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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。