以下内容转贴自一个CSDN的网友，输入某些内容后可以自动筛选下拉列表的内容。
<!--Part code come from :http://us.f901.mail.yahoo.com/ym/Compose?YY=123456-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editable listbox</title>
<style>
/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}
/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight>210)?"210px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
/* JK */
.minHeightTextarea{
height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
overflow : auto;
}
.backgroundIframe{
position:absolute;
z-index:9;
width:expression(this.previousSibling.offsetWidth);
height:expression(this.previousSibling.offsetHeight);
}
</style>
<script language=javascript>
var tofieldListArray= new Array();
tofieldListArray[0] = "a@b.c";
tofieldListArray[1] = "深圳市科技园";
tofieldListArray[2] = "深圳市罗湖东门";
tofieldListArray[3] = "深圳市罗/"湖东门";
var ccfieldListArray=tofieldListArray;
</script>
<script language=javascript>
var AC_TAB = 9; // make the selection
var AC_ENTER = 13; // make the selection
var AC_UP_ARROW = 38; // move the drop down list selection up by one
var AC_DOWN_ARROW = 40; // move the drop down list selection down by one
var theListDiv;
var theListArray;
var theBgIframe;
var theComboxObj;
οnlοad=OnLoad
function OnLoad()
{
setTimeout("Initialize()", 100);
}
function Initialize()
{
AddListDivFun(document.all.tofield);
AddListDivFun(document.all.ccfield);
}
function AddListDivFun(obj)
{
theListArray=eval(obj.id+"ListArray");
var tempStr=new Array();
var tempI=0;
tempStr[tempI++]='<DIV style="position:relative;visibility:hidden">'
+'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 10; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
+'οnmοuseοver="mouseOverListDivFun(event)" οnmοuseοut="mouseOutListDivFun(event);" οnmοusedοwn="mouseDownListDivFun(event);">';
for(var i=0;i<theListArray.length;i++)
tempStr[tempI++]='<DIV class=ac_menuitem value='+i+' >'+htmlEncode(theListArray[i])+'</DIV>';
tempStr[tempI++]='</DIV><iframe name="'+obj.id+'BgIframe" style="visibility:visible;position:absolute"></iframe></DIV>';
obj.insertAdjacentHTML("afterEnd",tempStr.join(""));
theListDiv=eval(obj.id+"ListDiv");
theBgIframe=document.all(obj.id+"BgIframe");
theBgIframe.className="backgroundIframe";
theBgIframe.style.display="none";
obj.οnfοcus=AC_OnFocus;
obj.οnblur=AC_OnBlur;
obj.οnkeydοwn=AC_OnKeyDown;
obj.autoComplete="off";
obj.onpropertychange=AC_OnPropertyChange;
}
function AC_OnFocus(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
theListArray=eval(obj.id+"ListArray");
theBgIframe=document.all(obj.id+"BgIframe");
theComboxObj=obj;
theListDiv.style.visibility="visible";
theBgIframe.style.display="";
adjustListDivScroll();
}
function AC_OnBlur(obj)
{
if(obj==null) obj=event.srcElement;
if(theListDiv.contains(document.activeElement)) obj.focus();
else
{
theListDiv.style.visibility="hidden";
theBgIframe.style.display="none";
}
}
function AC_OnPropertyChange(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
if(theListDiv==null) return ;
theListArray=eval(obj.id+"ListArray");
var theListDivChildren=theListDiv.children;
theListDiv.selectedIndex=-1;
var theFirstVisibleIndex=-1;
var objValue=obj.value;
var i=0;
while(theListArray[i]!=null)
{
if(theListArray[i].indexOf(objValue)>=0 && objValue!="")
{
if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
theListDivChildren[i].className="ac_menuitem";
theListDivChildren[i].style.display="";
//theListDivChildren[i].innerHTML="<b>"+htmlEncode(objValue)+"</b>"+htmlEncode(theListArray[i].substr(objValue.length));//这一句可以省略以节约资源
}
else
theListDivChildren[i].style.display="none";
if(theListDiv.selectedIndex==-1 && theListArray[i]==objValue) theListDiv.selectedIndex=i;
i++;
}
if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
{
theListDiv.selectedIndex=theFirstVisibleIndex;
}
if(theListDiv.selectedIndex!=-1) theListDivChildren[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
}
function AC_OnKeyDown(obj)
{
if(theListDiv==null) return ;
if(obj==null) obj=event.srcElement;
var keyCode=event.keyCode;
if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
{
obj.value=theListArray[theListDiv.selectedIndex];
return ;
}
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].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
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].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
break;
}
}
return;
}
}
function htmlEncode(str)
{
if(str==null) return "";
str=str.replace(/</ig,"<")
str=str.replace(/>/ig,">");
str=str.replace(/"/ig,""");
return str;
}
function mouseOverListDivFun(event)
{
if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
}
function mouseOutListDivFun(event)
{
if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
}
function mouseDownListDivFun(event)
{
var selectedStr="";
if(event.srcElement==theListDiv) return;
else if(event.srcElement.tagName=="B") selectedStr=theListArray[event.srcElement.parentElement.value] ;
else selectedStr=theListArray[event.srcElement.value];
theComboxObj.value=selectedStr;
theComboxObj.blur();
}
function adjustListDivScroll()
{
if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
var i=theListDiv.selectedIndex;
if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
theListDiv.scrollTop=theListDiv.children[i].offsetTop-95;
}
</script>
</head>
<body >
<form name="Compose" id="Compose" method=post action="/ym/Compose?YY=61185">
<table cellpadding=4 cellspacing=0 border=0 width="100%" >
<tr>
<td >Mail To:</td>
<td style="padding-top:0px;" >
<textarea name="To" class="minHeightTextarea" style="width:300" tabindex="1" id="tofield"
rows="1" title="textarea" cols="20" ></textarea>
</td>
</tr>
<tr>
<td >Mail Cc:</td>
<td style="padding-top:0px;" >
<input name="Cc" style="width:300" tabindex="1" id="ccfield" value=a title="input" >
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test test test test test test test test test test test test test test</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>abc</option>
<option>tast1</option>
<option>test2</option>
</select>
</td>
</tr>
<tr>
<td >Select </td>
<td style="padding-top:0px;" >
<select ><option>test</select>
</td>
</tr>
</table>
</form>
</body>
</html>
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
