العديد من مواقع الويب لديها هذا التأثير. ، تحتاج إلى استخدام شيء Ajax.
نسخ رمز رمز على النحو التالي:
<html>
<head>
<title> مربع نص مع مطابقة الإدخال </title>
<style>
الجسم ، div {
Font-Family: Verdana ؛
رفع الخط: 100 ٪ ؛
حجم الخط: 10pt ؛
}
مدخل {
العرض: 320 بكسل ؛
}
H1 {
محاذاة النص: المركز ؛
حجم الخط: 2.2EM ؛
}
#divc {
الحدود: 1 بكسل الصلبة #555 ؛
}
.des {
العرض: 500 بكسل ؛
خلفية اللون: Lightyellow ؛
الحدود: 1 بكسل الصلبة #555 ؛
الحشو: 25 بكسل ؛
الهامش: 25 بكسل ؛
}
.mouseover {
اللون: #ffffff ؛
خلفية اللون: تسليط الضوء.
العرض: 100 ٪ ؛
المؤشر: الافتراضي ؛
}
.mouseout {
اللون:#000 ؛
العرض: 100 ٪ ؛
خلفية اللون: #ffffff ؛
المؤشر: الافتراضي ؛
}
</style>
<script language = "javaScript">
<!-
وظيفة jsauto (instancename ، objid)
{{
this._msg = [] ؛
this._x = null ؛
this._o = document.getElementById (objid) ؛
إذا (! this._o) العودة ؛
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" ؛
إرجاع هذا ؛
} ؛
jsauto.prototype.directionkey = function () {with (this)
{{
var e = _e.keycode؟
var l = _o.childnodes.length ؛
(_c> l-1 || _c <0)؟
إذا (e == 40 && _s)
{{
_o.childnodes [_c] .className = "mouseout" ؛
(_c> = l-1)؟
_o.childnodes [_c] .className = "Mouseover" ؛
}
إذا (e == 38 && _s)
{{
_o.childnodes [_c] .className = "mouseout" ؛
_C-<= 0؟
_o.childnodes [_c] .className = "Mouseover" ؛
}
إذا (ه == 13)
{{
if (_o.childnodes [_c] && _o.style.vibility == "مرئي")
{{
_r.value = _x [_c] ؛
_o.style.visibility = "Hidden" ؛
}
}
إذا (! _s)
{{
_c = 0 ؛
_o.childnodes [_c] .className = "Mouseover" ؛
_s = صحيح ؛
}
}} ؛
// mouseevent.
jsauto.prototype.domouseover = وظيفة (obj) {مع (هذا)
{{
_o.childnodes [_c] .className = "mouseout" ؛
_c = 0 ؛
obj.tagname == "div"؟
}} ؛
jsauto.prototype.domouseout = وظيفة (OBJ)
{{
obj.tagname == "div"؟
} ؛
jsauto.prototype.doclick = function (msg) {with (this)
{{
إذا (_R)
{{
_r.value = msg ؛
_o.style.visibility = "Hidden" ؛
}
آخر
{{
التنبيه ("JavaScript explete خطأ:/n/n لا يمكن الحصول على كائن الإرجاع.") ؛
يعود؛
}
}} ؛
// طريقة الكائن ؛
jsauto.prototype.item = وظيفة (msg)
{{
if (msg.indexof ("،")> 0)
{{
var arrmsg = msg.split ("،") ؛
لـ (var i = 0 ؛ i <arrmsg.length ؛ i ++)
{{
ARRMSG [i]؟
}
}
آخر
{{
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") ؛
// ربط الحدث إلى الكائن.
div.onmouseover = function () {_ i.domouseover (this)} ؛
div.onmouseout = 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)
{{
إذا (_f && _v! = "")
{{
_o.style.left = _r.offsetleft ؛
_o.style.width = _r.offsetWidth ؛
_o.style.top = _r.offsettop + _r.offsetheight ؛
_o.style.visibility = "مرئي" ؛
}
آخر
{{
_o.style.visibility = "Hidden" ؛
}
}} ؛
jsauto.prototype.handleevent = function (fvalue ، fid ، event) {with (this)
{{
var re ؛
_e = الحدث ؛
var e = _e.keycode؟
_x = [] ؛
_f = false ؛
_r = document.getElementById (FID) ؛
_v = fvalue ؛
_i = eval (_i) ؛
re = new regexp ("^" + fvalue + "" ، "i") ؛
_o.innerhtml = "" ؛
لـ (var i = 0 ؛ i <_msg.length ؛ i ++)
{{
if (re.test (_msg [i]))
{{
_i.append (_msg [i]) ؛
_f = صحيح ؛
}
}
_i؟ _i.display (): "لا يمكن الحصول على مثيل") ؛
إذا (_F)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.directionKey () ؛
}
آخر
{{
_c = 0 ؛
_o.childnodes [_c] .className = "Mouseover" ؛
_s = صحيح ؛
}
}
}} ؛
window.onerror = وظيفة جديدة ("إرجاع صحيح ؛") ؛
//->
</script>
</head>
<body>
<div id = "divc">
<!-هذه هي الحاوية الإكمال التلقائي .-->
</div>
<div align = "center">
<input onKeyup = "jsautoinstance.handleevent (this.value ، 'auto' ، event)" id = "auto">
</div>
<script language = "javaScript">
<!-
var jsautoinstance = new jsauto ("jsautoinstance" ، "divc") ؛
Jsautoinstance.item ("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 ، V-Start ، W-Start ، X-Start ، Y-Start ، Z-Start ، U-Start ، V-Start ، W-Start ، X-Start ، Y-Start ، Z-Start ، Z-Start ، A. -start ، b -start ، c-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 ، S-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 ، a-start ، b-start ، c-start ، d-start ، e-start ، z-start ، z-start ") ؛
jsautoinstance.item ("bluedestiny") ؛
jsautoinstance.item ("Bluemiracle ، Blue") ؛
jsautoinstance.item ("Angela ، Geniuslau") ؛
jsautoinstance.item ("Never-Online") ؛
//->
</script>
<centre> الرجاء إدخال رسالة في مربع الإدخال: </center>
</body>
</html>