可输入、自动匹配的下拉框

STYLE.CSS
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;z-index:99;cursor:default;overflow:hidden;-moz-box-sizing:border-box;height:expression((this.scrollHeight>130)?"130px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:default;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:default;}
MAIN.JS
<!--Combobox-->
function combobox(sobj,al_v,al_t)
{
var rmopo = window.createPopup();
function rm(i,oct,h)
{
var i2=eval(i);
var oct=eval(oct);
var w=eval(i).offsetWidth;
var h=eval(h);
var lefter = i2.offsetLeft-1; var topper = i2.offsetHeight;
rmopo.document.body.innerHTML = oct.innerHTML;
rmopo.document.body.style.border="1px solid #3162A6";
rmopo.document.body.style.background="#F6F6F6";
rmopo.show(lefter, topper, w, h, i2);
}
loadcombobox(sobj,al_v,al_t);
function loadcombobox(obj,al_v,al_t)
{
var obj = eval(obj)
theListArrayV = al_v;
theListArrayT = al_t;
var tempStr='<DIV id="'+obj.id+'showcombox" style="position:relative;visibility:hidden">'
+'<DIV class="ac_menu" id="'+obj.id+'ListDiv" style="FONT-SIZE: 12px; Z-INDEX: 10; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:expression('+obj.offsetWidth+'-1);">'
for(var i=0;i<theListArrayV.length;i++)
tempStr+='<DIV class="ac_menuitem" onmouseover="this.style.backgroundColor=/'#D6DEEC/';" onmouseout="this.style.backgroundColor=/'/';" onclick="this.selectedflag=1;parent.document.all.'+obj.id+'.value=this.value;parent.document.all.'+obj.id+'.blur();" style="cursor:default;" value="'+htmlEncode(theListArrayV[i])+'" textvalue="'+htmlEncode(theListArrayT[i])+'">'+htmlEncode(theListArrayT[i])+'</DIV>';
tempStr+='</DIV></DIV>';
obj.insertAdjacentHTML("afterEnd",tempStr);
obj.onfocus=AC_OnFocus;
obj.onclick=AC_OnFocus;
obj.onblur=AC_OnBlur;
obj.onkeydown=AC_OnKeyDown;
obj.autoComplete="off";
obj.onpropertychange=AC_OnPropertyChange;
}
function AC_OnFocus(obj)
{
if(obj==null) obj=event.srcElement;
popmenu=eval(obj.id+"showcombox");
rm(obj,popmenu,130);
AC_OnPropertyChange(obj);
}

function AC_OnBlur(obj)
{
rmopo.hide();
}
function AC_OnPropertyChange(obj)
{
if(obj==null) obj=event.srcElement;
var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv
if(theListDiv==null) return ;
var theListDivChildren=theListDiv.children;
theListDiv.selectedIndex=-1;
var theFirstVisibleIndex=-1;
var objValue=obj.value;
for(var i=0;i<theListDivChildren.length;i++)
{
if(theListDiv.children[i].textvalue.indexOf(objValue)==0)
{
if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
theListDivChildren[i].style.backgroundColor="#F6F6F6";
theListDivChildren[i].style.display="";
}
else
theListDivChildren[i].style.display="none";
if(theListDiv.selectedIndex==-1 && theListDiv.children[i].textvalue==objValue)
{
theListDiv.selectedIndex=i;
}
}
if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
{
theListDiv.selectedIndex=theFirstVisibleIndex;
}
if(theListDiv.selectedIndex!=-1)
{
theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
}
adjustListDivScroll(obj);
}
function AC_OnKeyDown(obj)
{
if(obj==null) obj=event.srcElement;
var AC_TAB = 9;
var AC_ENTER = 13;
var AC_UP_ARROW = 38;
var AC_DOWN_ARROW = 40;
var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv
if(theListDiv==null) return ;
var keyCode=event.keyCode;
if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
{
obj.value=theListDiv.children[theListDiv.selectedIndex].value;
rmopo.hide() ;
}

if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex-1;i>-1;i--)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
adjustListDivScroll(obj);
break;
}
}
}

if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
adjustListDivScroll(obj);
break;
}
}
return;
}

}
function adjustListDivScroll(obj)
{
if(obj==null) obj=event.srcElement;
var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv
if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
var i=theListDiv.selectedIndex;
if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+120))
theListDiv.scrollTop=theListDiv.children[i].offsetTop-85;
}
function htmlEncode(str)
{
if(str==null) return "";
str=str.replace(/</ig,"<")
str=str.replace(/>/ig,">");
str=str.replace(/"/ig,""");
return str;
}
}
<!--end-->

COMBOBOX.HTM
<html>
<head>
<link type="text/css" rel="stylesheet" href="../../style.css">
<script language="javascript" src="../../main.js"></script>
</head>
<body>
<table cellpadding=4 cellspacing=0 border=0 width="100%" >
<tr>
<td >Pid A:</td>
<td style="padding-top:0px;" >
<input name="Cca" style="width:300" tabindex="1" id="ccfield">
</td>
</tr>
<tr>
<td >Pid B:</td>
<td style="padding-top:0px;" >
<input name="Ccb" style="width:300" tabindex="1" id="ttfield">
</td>
</tr>
<tr>
<td >Select:</td>
<td style="padding-top:0px;" >
<select style="width:300px;"></select>
</td>
</tr>
</table>
<script>
var lat=["001001 产品一之一","001002 产品一之二","001011 产品一之三","001012 产品一之四","001021 产品一之五","001022 产品一之六","001023 产品一之七",
"002031 产品二之一","002032 产品二之二","002041 产品二之三","002042 产品二之四","002043 产品二之五","002051 产品二之六","002052 产品二之七",
"003000 产品三之一","003001 产品三之二","003101 产品三之三","003102 产品三之四","003201 产品三之五","003202 产品三之六","003216 产品三之七"];
var lav=["产品一之一","产品一之二","产品一之三","产品一之四","产品一之五","产品一之六","产品一之七",
"产品二之一","产品二之二","产品二之三","产品二之四","产品二之五","产品二之六","产品二之七",
"产品三之一","产品三之二","产品三之三","产品三之四","产品三之五","产品三之六","产品三之七"];
combobox(document.all.ccfield,lat,lat);
combobox(document.all.ttfield,lav,lat);
</script>
</body>
</html>
效果如下：
图一：



图二：



图三：