自动完成
学弟叫实现自动完成的功能，上网搜了一些：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>网页特效代码|JsCode.CN|---模仿IE自动完成功能，读取输入框存取记录</title> <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> <script language="JavaScript"> <!-- // script by blueDestiny // email : blueDestiny [at] 126 . com // Object: jsAuto // browser: ie, mf. // example: // step1 : // create autocomplete container, return object and bind event to the object, and ///create a new jsAuto instance: // <div id="divautocomplete"></div> // var autocomplete = new jsAuto("autocomplete","divautocomplete") // handle event: // autocomplete.handleEvent(value, returnObjectID) // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)> // step2 : // add autocompete item: // autocomplete.item(string) // string must be a string var, you can split the string by "," // autocomplete.item("blueDestiny,never-online,csdn,blueidea") // http://www.never-online.com function jsAuto(instanceName, objID) { this._msg = []; this._x = null; this._o = document.getElementById(objID); if (!this._o) return; this._f = null; this._i = instanceName; this._r = null; this._c = 0; this._s = false; this._v = null; this._o.style.visibility = "hidden"; this._o.style.position = "absolute"; this._o.style.zIndex = "9999"; this._o.style.overflow = "auto"; this._o.style.height = "50"; return this; }; jsAuto.prototype.directionKey = function() { with (this) { var e = _e.keyCode ? _e.keyCode : _e.which; var l = _o.childNodes.length; (_c > l - 1 || _c < 0) ? _s = false : ""; if (e == 40 && _s) { _o.childNodes[_c].className = "mouseout"; (_c >= l - 1) ? _c = 0 : _c++; _o.childNodes[_c].className = "mouseover"; } if (e == 38 && _s) { _o.childNodes[_c].className = "mouseout"; _c-- <= 0 ? _c = _o.childNodes.length - 1 : ""; _o.childNodes[_c].className = "mouseover"; } if (e == 13) { if (_o.childNodes[_c] && _o.style.visibility == "visible") { _r.value = _x[_c]; _o.style.visibility = "hidden"; } } if (!_s) { _c = 0; _o.childNodes[_c].className = "mouseover"; _s = true; } } }; // mouseEvent. jsAuto.prototype.domouseover = function(obj) { with (this) { _o.childNodes[_c].className = "mouseout"; _c = 0; obj.tagName == "DIV" ? obj.className = "mouseover" : obj.parentElement.className = "mouseover"; } }; jsAuto.prototype.domouseout = function(obj) { obj.tagName == "DIV" ? obj.className = "mouseout" : obj.parentElement.className = "mouseout"; }; jsAuto.prototype.doclick = function(msg) { with (this) { if (_r) { _r.value = msg; _o.style.visibility = "hidden"; } else { alert("javascript autocomplete ERROR :\n\n can not get return object."); return; } } }; // object method; jsAuto.prototype.item = function(msg) { if (msg.indexOf(",") > 0) { var arrMsg = msg.split(","); for (var i = 0; i < arrMsg.length; i++) { arrMsg[i] ? this._msg.push(arrMsg[i]) : ""; } } else { this._msg.push(msg); } this._msg.sort(); }; jsAuto.prototype.append = function(msg) { with (this) { _i ? "" : _i = eval(_i); _x.push(msg); var div = document.createElement("DIV"); //bind event to object. div. = function() { _i.domouseover(this) }; div. = function() { _i.domouseout(this) }; div.onclick = function() { _i.doclick(msg) }; var re = new RegExp("(" + _v + ")", "i"); div.style.lineHeight = "140%"; div.className = "mouseout"; if (_v) div.innerHTML = msg.replace(re, "<strong>$1</strong>"); div.style.fontFamily = "verdana"; _o.appendChild(div); } }; jsAuto.prototype.display = function() { with (this) { if (_f && _v != "") { _o.style.left = _r.offsetLeft; _o.style.width = _r.offsetWidth; _o.style.top = _r.offsetTop + _r.offsetHeight; _o.style.visibility = "visible"; } else { _o.style.visibility = "hidden"; } } }; jsAuto.prototype.handleEvent = function(fValue, fID, event) { with (this) { var re; _e = event; var e = _e.keyCode ? _e.keyCode : _e.which; _x = []; _f = false; _r = document.getElementById(fID); _v = fValue; _i = eval(_i); re = new RegExp("^" + fValue + "", "i"); _o.innerHTML = ""; for (var i = 0; i < _msg.length; i++) { if (re.test(_msg[i])) { _i.append(_msg[i]); _f = true; } } _i ? _i.display() : alert("can not get instance"); if (_f) { if ((e == 38 || e == 40 || e == 13)) { _i.directionKey(); } else { _c = 0; _o.childNodes[_c].className = "mouseover"; _s = true; } } } }; window.onerror = new Function("return true;"); //--> </script> </head> <body> <div id="divc"> <!--this is the autocomplete container.--> </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> <script language="JavaScript"> //<!-- var jsAutoInstance = new jsAuto("jsAutoInstance", "divc"); jsAutoInstance.item("小强,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start"); jsAutoInstance.item("blueDestiny"); jsAutoInstance.item("BlueMiracle,Blue"); jsAutoInstance.item("angela,geniuslau"); jsAutoInstance.item("never-online"); //--> </script> <center> 请随便输入一个字母看看 -_-</center> </body> </html>
scriptaculous：（由于中文自动完成问题）
在对scriptaculous的Autocompleter功能进行测试时，我发现在使用中文时存在问题。
例如：
指定一个文本域元素，调用Autocompleter.Local：
new Autocompleter.Local('idTextField',
"idMenu",
["好天气", "abc"]
,{});
这时，如果在文本域中输入中文，如："好"，不能显示匹配选项；
如果输入英文，如："a"，可以显示匹配选项“abc”.
产生原因：
scriptaculous通过监听keydown事件监测键盘输入，因此每次输入一个字母，都会触发
keydown事件，这时scriptaculous就会从数据源异步获取数据，显示在下面的可选项列表中。
但是在中文输入状态中，一旦按下字母键，输入法程序就接管了键盘输入，此时无法再网页上触发keydown事件。当中文输入完成，输入法程序将输入的汉字拷贝到输入框中，此时也不触发keydown事件。这样，scriptaculous就不会从数据源取数据，因此也不会显示可选项列表。
解决办法：
针对其原因，我修改了scriptaculous的智能完成部分代码，通过轮询的方式检测键盘输入，可以完好的解决此问题。
原文链接： http://web.kingyar.com/Article.aspx?id=181 ： 里面有下载的~