Banyak situs web memiliki efek ini. , Anda perlu menggunakan hal AJAX.
Salin kode kode sebagai berikut:
<Html>
<head>
<iteme> kotak teks dengan kecocokan input </iteme>
<tyle>
tubuh, div {
Font-Family: Verdana;
Line-Height: 100%;
Ukuran font: 10pt;
}
input {
Lebar: 320px;
}
h1 {
Teks-Align: tengah;
Ukuran font: 2.2em;
}
#divc {
Perbatasan: 1px solid #555;
}
.des {
Lebar: 500px;
Latar Belakang: Lightyellow;
Perbatasan: 1px solid #555;
padding: 25px;
margin-top: 25px;
}
.mouseover {
Warna: #FFFFFF;
Latar Belakang: Sorot;
Lebar: 100%;
kursor: default;
}
.mouseout {
Warna:#000;
Lebar: 100%;
Latar Belakang-Color: #FFFFFF;
kursor: default;
}
</tyle>
<Bahasa skrip = "javascript">
<!-
Fungsi jsauto (instancename, objid)
{{
this._msg = [];
this._x = null;
this._o = document.geteLementById (objid);
if (! this._o) kembali;
this._f = null;
this._i = instancename;
this._r = null;
this._c = 0;
this._s = false;
this._v = null;
this._o.style.visibility = "tersembunyi";
this._o.style.position = "absolute";
this._o.style.zindex = "9999";
this._o.style.overflow = "auto";
this._o.style.height = "50";
kembalikan ini;
};
jsauto.prototype.directionKey = function () {with (this)
{{
var e = _e.keycode?
var l = _o.childnodes.length;
(_c> l-1 || _c <0)?
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 = "tersembunyi";
}
}
if (! _s)
{{
_c = 0;
_O.Childnodes [_c] .className = "MouseOver";
_s = true;
}
}};
// MouseEvent.
jsauto.prototype.domouseover = fungsi (obj) {dengan (ini)
{{
_O.Childnodes [_c] .className = "mouseout";
_c = 0;
obj.tagname == "Div"?
}};
jsauto.prototype.domouseout = function (OBJ)
{{
obj.tagname == "Div"?
};
jsauto.prototype.doclick = function (msg) {with (this)
{{
if (_r)
{{
_r.value = msg;
_o.Style.visibility = "tersembunyi";
}
kalau tidak
{{
Peringatan ("JavaScript Autocomplete Error:/N/N tidak bisa mendapatkan objek pengembalian.");
kembali;
}
}};
// metode objek;
jsauto.prototype.item = fungsi (msg)
{{
if (msg.indexof (",")> 0)
{{
var arrmsg = msg.split (",");
untuk (var i = 0; i <arrmsg.length; i ++)
{{
arrmsg [i]?
}
}
kalau tidak
{{
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 ke Object.
div.onmouseover = function () {_ i.domouseover (this)};
div.onmouseout = function () {_ i.domouseout (this)};
div.onClick = function () {_ i.doclick (msg)};
var re = regexp baru ("(" + _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";
}
kalau tidak
{{
_o.Style.visibility = "tersembunyi";
}
}};
jsauto.prototype.handleevent = function (fvalue, fid, event) {with (this)
{{
var re;
_e = acara;
var e = _e.keycode?
_x = [];
_f = false;
_r = document.getElementById (fid);
_V = fValue;
_i = eval (_i);
re = regexp baru ("^" + fvalue + "", "i");
_o.innerHtml = "";
untuk (var i = 0; i <_msg.length; i ++)
{{
if (re.test (_msg [i]))
{{
_i.Append (_msg [i]);
_f = true;
}
}
_i? _i.display (): peringatan ("tidak bisa mendapatkan instance");
if (_f)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.directionKey ();
}
kalau tidak
{{
_c = 0;
_O.Childnodes [_c] .className = "MouseOver";
_s = true;
}
}
}};
window.onError = fungsi baru ("return true;");
//->
</script>
</head>
<body>
<Div id = "Divc">
<!-Ini adalah wadah pelengkapan otomatis .-->
</div>
<Div Align = "Center">
<input onkeyup = "jsautoinstance.handleevent (this.value, 'auto', event)" id = "auto">
</div>
<Bahasa skrip = "javascript">
<!-
var jsautoinstance = jsauto baru ("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. -Meng, 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. -Meng, 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. -Mendam, 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. -Meng, F -M-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 ("tidak pernah online");
//->
</script>
<tenter> Harap masukkan huruf di kotak input: </denter>
</body>
</html>