|
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2017-2-4 11:37:13
