模仿IE自动完成功能_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:33:31

模仿IE自动完成功能_javascript技巧

模仿IE自动完成功能_javascript技巧: New Document 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

推荐度：

点击下载本文 文档为doc格式

导读模仿IE自动完成功能_javascript技巧: New Document 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

<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>

// 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"; 
 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$1"); 
 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;"); 
//--> 
 
</HEAD>

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

</BODY> 
</HTML>

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

模仿IE自动完成功能_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： IE js javascript

热门焦点

模仿IE自动完成功能_javascript技巧

模仿IE自动完成功能_javascript技巧

模仿IE自动完成功能_javascript技巧

最新推荐

猜你喜欢

热门推荐