<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><META content="fason,阿信" name=Author><title>动态提示的下拉框</title><style>
a{color:red;text-decoration:none;font-size:12px}
a
</style></head><body onload="Init()"><center><h2>动态提示的下拉框</h2><hr><form name=frm><table> <tr> <td>请输入1或2或3或4或5进行测试：<br><input name="txt" style="100px" onkeyup="SelectTip(0)"> <input type="button" value="reset" onclick="SelectTip(1)"></td> </tr> <tr> <td> <span id="demo"><select name="demo" style="100px" size=10 onchange="txt.value=options[selectedIndex].text;"> <option value="1">1</option> <option value="12">12</option> <option value="123">123</option> <option value="1234">1234</option> <option value="2">2</option> <option value="23">23</option> <option value="234">234</option> <option value="2345">2345</option> <option value="3">3</option> <option value="34">34</option> <option value="345">345</option> <option value="3456">3456</option> <option value="5">5</option> <option value="51">51</option> <option value="51w">51w</option> <option value="51wi">51wi</option> <option value="51win">51win</option> <option value="51windows">51windows</option> </select></span> </td> </tr> </form></table><hr><script language="javascript">var TempArr=[];//存贮optionfunction Init(){
var SelectObj=document.frm.elements["demo"]
/*先将数据存入数组*/
with(SelectObj) for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]
}function SelectTip(flag){var TxtObj=document.frm.elements["txt"]var SelectObj=document.getElementById("demo")var Arr=[]with(SelectObj){ var SelectHTML=innerHTML.match(/<[^>]*>/)[0] for(i=0;i<TempArr.length;i++) if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化 Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>" innerHTML=SelectHTML+Arr.join()+"</SELECT>"
}}</script></body><script language="javascript">var intIndex=0;arrList = new Array();arrList[intIndex++] = "1sdfsdf.com";arrList[intIndex++] = "a11sdafs.net";arrList[intIndex++] = "b22dsafsdf";arrList[intIndex++] = "c333asdfsadf";arrList[intIndex++] = "4444dsafasdf";arrList[intIndex++] = "dddsfddsafdsaf";arrList[intIndex++] = "121213dsafsdaf";arrList[intIndex++] = "43213asdfadsf";arrList[intIndex++] = "dsa3121dasf3";arrList[intIndex++] = "a213";arrList[intIndex++] = "323313";arrList[intIndex++] = "3213";arrList[intIndex++] = "32213";arrList[intIndex++] = "dsfsdddd";arrList[intIndex++] = "ds11dfsfd";arrList[intIndex++] = "ffdafd";arrList[intIndex++] = "afdfd";arrList[intIndex++] = "afd";arrList[intIndex++] = "baffad";arrList[intIndex++] = "2fda2fd";arrList[intIndex++] = "dasd";function smanPromptList(arrList,objInputId){ this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;} window.onload =function() { arrList.sort(function(a,b){ if(a.length>b.length)return 1; else if(a.length==b.length)return a.localeCompare(b); else return -1; }) var objouter=document.getElementById("__smanDisp") //显示的DIV对象 var objInput = document.getElementById(objInputId); //文本框对象 var selectedIndex=-1; var intTmp; //循环用的:) if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;} //文本框失去焦点 objInput.onblur=function(){ objouter.style.display='none'; } //文本框按键抬起 objInput.onkeyup=checkKeyCode; //文本框得到焦点 objInput.onfocus=checkAndShow; function checkKeyCode(){ var ie = (document.all)? true:false if (ie){ var keyCode=event.keyCode if (keyCode==40||keyCode==38){ //下上 var isUp=false if(keyCode==40) isUp=true ; chageSelection(isUp) }else if (keyCode==13){//回车 outSelection(selectedIndex); }else{ checkAndShow() } }else{ checkAndShow() } divPosition() } function checkAndShow(){ var strInput = objInput.value if (strInput!=""){ divPosition(); selectedIndex=-1; objouter.innerHTML =""; for (intTmp=0;intTmp<arrList.length;intTmp++){ if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){ addOption(arrList[intTmp]); } } objouter.style.display=''; }else{ objouter.style.display='none'; } function addOption(value){ objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>" } } function chageSelection(isUp){ if (objouter.style.display=='none'){ objouter.style.display=''; }else{ if (isUp) selectedIndex++ else selectedIndex-- } var maxIndex = objouter.children.length-1; if (selectedIndex<0){selectedIndex=0} if (selectedIndex>maxIndex) {selectedIndex=maxIndex} for (intTmp=0;intTmp<=maxIndex;intTmp++){ if (intTmp==selectedIndex){ objouter.children[intTmp].className="sman_selectedStyle"; }else{ objouter.children[intTmp].className=""; } } } function outSelection(Index){ objInput.value = objouter.children[Index].innerText; objouter.style.display='none'; } function divPosition(){ objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput); objouter.style.left =getAbsoluteLeft(objInput); objouter.style.width=getAbsoluteWidth(objInput) } } document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>"); document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); function getAbsoluteHeight(ob){ return ob.offsetHeight } function getAbsoluteWidth(ob){ return ob.offsetWidth } function getAbsoluteLeft(ob){ var mendingLeft = ob .offsetLeft; while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){ mendingLeft += ob .offsetParent.offsetLeft; mendingOb = ob.offsetParent; } return mendingLeft ; } function getAbsoluteTop(ob){ var mendingTop = ob.offsetTop; while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){ mendingTop += ob .offsetParent.offsetTop; ob = ob .offsetParent; } return mendingTop ; }}smanPromptList(arrList,"inputer")</script><input type="text" id="inputer">