模仿IE自动完成功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style> 
body,div { 
    font-family:verdana; 
    line-height:100%; 
    font-size:9pt; 
} 
input { 
    width:300px; 
} 
h1 { 
    text-align:center; 
    font-size:2.2em; 
} 
#divf { 
    margin:10px; 
    font-size:0.8em; 
    text-align:center; 
} 
#divc { 
    border:1px solid #333333; 
} 
.des { 
    width:500px; 
    background-color:lightyellow; 
    border:1px solid #333; 
    padding:20px; 
    margin-top:20px; 
} 
.mouseover { 
    color:#ffffff; 
    background-color:highlight; 
    width:100%; 
    cursor:default; 
} 
.mouseout { 
    color:#000000; 
    width:100%; 
    background-color:#ffffff; 
    cursor:default; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0A%0D%0A%2F%2F%20script%20by%20blueDestiny%20%0D%0A%2F%2F%20email%20%3A%20blueDestiny%20%5Bat%5D%20126%20.%20com%20%0D%0A%0D%0A%2F%2F%20Object%3A%20jsAuto%20%0D%0A%2F%2F%20browser%3A%20ie%2C%20mf.%20%0D%0A%2F%2F%20example%3A%20%0D%0A%0D%0A%2F%2F%20step1%20%3A%20%20%0D%0A%2F%2F%20create%20autocomplete%20container%2C%20return%20object%20and%20bind%20event%20to%20the%20object%2C%20and%20%20%0D%0A%2F%2F%2Fcreate%20a%20new%20jsAuto%20instance%3A%20%0D%0A%2F%2F%20%3Cdiv%20id%3D%22divautocomplete%22%3E%3C%2Fdiv%3E%20%0D%0A%2F%2F%20var%20autocomplete%20%3D%20new%20jsAuto(%22autocomplete%22%2C%22divautocomplete%22)%20%0D%0A%2F%2F%20handle%20event%3A%20%0D%0A%2F%2F%20autocomplete.handleEvent(value%2C%20returnObjectID)%20%0D%0A%2F%2F%20%3Cinput%20id%3D%22rautocomplete%22%20onkeyup%3D%22autocomplete.handleEvent(this.value%2C%22ratocomplete%22%2Cevent)%3E%20%0D%0A%0D%0A%2F%2F%20step2%20%3A%20%0D%0A%2F%2F%20add%20autocompete%20item%3A%20%0D%0A%2F%2F%20autocomplete.item(string)%20%0D%0A%2F%2F%20string%20must%20be%20a%20string%20var%2C%20you%20can%20split%20the%20string%20by%20%22%2C%22%20%0D%0A%2F%2F%20autocomplete.item(%22blueDestiny%2Cnever-online%2Ccsdn%2Cblueidea%22)%20%0D%0A%0D%0A%2F%2F%20http%3A%2F%2Fwww.never-online.com%20%0D%0A%0D%0Afunction%20jsAuto(instanceName%2CobjID)%20%0D%0A%7B%20%0D%0A%20%20%20%20this._msg%20%3D%20%5B%5D%3B%20%0D%0A%20%20%20%20this._x%20%3D%20null%3B%20%0D%0A%20%20%20%20this._o%20%3D%20document.getElementById(%20objID%20)%3B%20%0D%0A%20%20%20%20if%20(!this._o)%20return%3B%20%0D%0A%20%20%20%20this._f%20%3D%20null%3B%20%0D%0A%20%20%20%20this._i%20%3D%20instanceName%3B%20%0D%0A%20%20%20%20this._r%20%3D%20null%3B%20%0D%0A%20%20%20%20this._c%20%3D%200%3B%20%0D%0A%20%20%20%20this._s%20%3D%20false%3B%20%0D%0A%20%20%20%20this._v%20%3D%20null%3B%20%0D%0A%20%20%20%20this._o.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0A%20%20%20%20this._o.style.position%20%3D%20%22absolute%22%3B%20%0D%0A%20%20%20%20this._o.style.zIndex%20%3D%20%229999%22%3B%20%0D%0A%20%20%20%20return%20this%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0AjsAuto.prototype.directionKey%3Dfunction()%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20e%20%3D%20_e.keyCode%20%3F%20_e.keyCode%20%3A%20_e.which%3B%20%0D%0A%20%20%20%20var%20l%20%3D%20_o.childNodes.length%3B%20%0D%0A%20%20%20%20(_c%3El-1%20%7C%7C%20_c%3C0)%20%3F%20_s%3Dfalse%20%3A%20%22%22%3B%20%0D%0A%0D%0A%20%20%20%20if(%20e%3D%3D40%20%26%26%20_s%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%3D%22mouseout%22%3B%20%0D%0A%20%20%20%20%20%20%20%20(_c%20%3E%3D%20l-1)%20%3F%20_c%3D0%20%3A%20_c%20%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%3D%22mouseover%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(%20e%3D%3D38%20%26%26%20_s%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%3D%22mouseout%22%3B%20%0D%0A%20%20%20%20%20%20%20%20_c--%3C%3D0%20%3F%20_c%20%3D%20_o.childNodes.length-1%20%3A%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%3D%22mouseover%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(%20e%3D%3D13%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(_o.childNodes%5B_c%5D%20%26%26%20_o.style.visibility%3D%3D%22visible%22)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_r.value%20%3D%20_x%5B_c%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_o.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(%20!_s%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_c%20%3D%200%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%3D%22mouseover%22%3B%20%0D%0A%20%20%20%20%20%20%20%20_s%20%3D%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%7D%3B%20%0D%0A%0D%0A%2F%2F%20mouseEvent.%20%0D%0AjsAuto.prototype.domouseover%3Dfunction(obj)%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20_o.childNodes%5B_c%5D.className%20%3D%20%22mouseout%22%3B%20%0D%0A%20%20%20%20_c%20%3D%200%3B%20%0D%0A%20%20%20%20obj.tagName%3D%3D%22DIV%22%20%3F%20obj.className%3D%22mouseover%22%20%3A%20obj.parentElement.className%3D%22mouseover%22%3B%20%0D%0A%7D%7D%3B%20%0D%0AjsAuto.prototype.domouseout%3Dfunction(obj)%20%0D%0A%7B%20%0D%0A%20%20%20%20obj.tagName%3D%3D%22DIV%22%20%3F%20obj.className%3D%22mouseout%22%20%3A%20obj.parentElement.className%3D%22mouseout%22%3B%20%0D%0A%7D%3B%20%0D%0AjsAuto.prototype.doclick%3Dfunction(msg)%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20if(_r)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_r.value%20%3D%20msg%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22javascript%20autocomplete%20ERROR%20%3A%5Cn%5Cn%20can%20not%20get%20return%20object.%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%7D%3B%20%0D%0A%0D%0A%2F%2F%20object%20method%3B%20%0D%0AjsAuto.prototype.item%3Dfunction(msg)%20%0D%0A%7B%20%0D%0A%20%20%20%20if(%20msg.indexOf(%22%2C%22)%3E0%20)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20arrMsg%3Dmsg.split(%22%2C%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3B%20i%3CarrMsg.length%3B%20i%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20arrMsg%5Bi%5D%20%3F%20this._msg.push(arrMsg%5Bi%5D)%20%3A%20%22%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20this._msg.push(msg)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20this._msg.sort()%3B%20%0D%0A%7D%3B%20%0D%0AjsAuto.prototype.append%3Dfunction(msg)%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20_i%20%3F%20%22%22%20%3A%20_i%20%3D%20eval(_i)%3B%20%0D%0A%20%20%20%20_x.push(msg)%3B%20%0D%0A%20%20%20%20var%20div%20%3D%20document.createElement(%22DIV%22)%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2Fbind%20event%20to%20object.%20%0D%0A%20%20%20%20div.onmouseover%20%3D%20function()%7B_i.domouseover(this)%7D%3B%20%0D%0A%20%20%20%20div.onmouseout%20%3D%20function()%7B_i.domouseout(this)%7D%3B%20%0D%0A%20%20%20%20div.onclick%20%3D%20function()%7B_i.doclick(msg)%7D%3B%20%0D%0A%20%20%20%20var%20re%20%20%3D%20new%20RegExp(%22(%22%20%2B%20_v%20%2B%20%22)%22%2C%22i%22)%3B%20%0D%0A%20%20%20%20div.style.lineHeight%3D%22140%25%22%3B%20%0D%0A%20%20%20%20div.className%20%3D%20%22mouseout%22%3B%20%0D%0A%20%20%20%20if%20(_v)%20div.innerHTML%20%3D%20msg.replace(re%20%2C%20%22%3Cstrong%3E%241%3C%2Fstrong%3E%22)%3B%20%0D%0A%20%20%20%20div.style.fontFamily%20%3D%20%22verdana%22%3B%20%0D%0A%0D%0A%20%20%20%20_o.appendChild(div)%3B%20%0D%0A%7D%7D%3B%20%0D%0AjsAuto.prototype.display%3Dfunction()%20%7B%20with(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20if(_f%26%26_v!%3D%22%22)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.left%20%3D%20_r.offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.width%20%3D%20_r.offsetWidth%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.top%20%3D%20_r.offsetTop%20%2B%20_r.offsetHeight%3B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.visibility%20%3D%20%22visible%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20_o.style.visibility%3D%22hidden%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%7D%3B%20%0D%0AjsAuto.prototype.handleEvent%3Dfunction(fValue%2CfID%2Cevent)%20%7B%20with%20(this)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20re%3B%20%0D%0A%20%20%20%20_e%20%3D%20event%3B%20%0D%0A%20%20%20%20var%20e%20%3D%20_e.keyCode%20%3F%20_e.keyCode%20%3A%20_e.which%3B%20%0D%0A%20%20%20%20_x%20%3D%20%5B%5D%3B%20%0D%0A%20%20%20%20_f%20%3D%20false%3B%20%0D%0A%20%20%20%20_r%20%3D%20document.getElementById(%20fID%20)%3B%20%0D%0A%20%20%20%20_v%20%3D%20fValue%3B%20%0D%0A%20%20%20%20_i%20%3D%20eval(_i)%3B%20%0D%0A%20%20%20%20re%20%3D%20new%20RegExp(%22%5E%22%20%2B%20fValue%20%2B%20%22%22%2C%20%22i%22)%3B%20%0D%0A%20%20%20%20_o.innerHTML%3D%22%22%3B%20%0D%0A%0D%0A%20%20%20%20for(var%20i%3D0%3B%20i%3C_msg.length%3B%20i%2B%2B)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(re.test(_msg%5Bi%5D))%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_i.append(_msg%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_f%20%3D%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20_i%20%3F%20_i.display()%20%3A%20alert(%22can%20not%20get%20instance%22)%3B%20%0D%0A%0D%0A%20%20%20%20if(_f)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if((e%3D%3D38%20%7C%7C%20e%3D%3D40%20%7C%7C%20e%3D%3D13))%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_i.directionKey()%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_c%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_o.childNodes%5B_c%5D.className%20%3D%20%22mouseover%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20_s%3Dtrue%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%7D%3B%20%0D%0Awindow.onerror%3Dnew%20Function(%22return%20true%3B%22)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2FSCRIPT%3E"> 
</HEAD>

<BODY> 
<div id="divc"> 
     
</div> 
<h1>Autocomplete Function</h1> 
<div align="center"> 
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"> 
</div> 
<div id="divf"> 
    Power By Miracle, never-online 
</div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程