Многие веб -сайты имеют этот эффект. Вам нужно использовать Ajax.
Код кода копирования следующим образом:
<html>
<Голова>
<Tilt> Текстовое поле с Match Match </title>
<style>
тело, div {
Семейство шрифта: Вердана;
Линия-высота: 100%;
размер шрифта: 10pt;
}
вход {
Ширина: 320px;
}
H1 {
Текст-альбом: Центр;
размер шрифта: 2.2EM;
}
#divc {
Граница: 1PX SOLID #555;
}
.des {
Ширина: 500px;
Фоно-цветный: световольный;
Граница: 1PX SOLID #555;
Заполнение: 25px;
маржинальная версия: 25px;
}
.mouseOver {
Цвет: #ffffff;
фоновый цвет: выделение;
Ширина: 100%;
Курсор: по умолчанию;
}
.mouseout {
Цвет:#000;
Ширина: 100%;
фоновый цвет: #ffffff;
Курсор: по умолчанию;
}
</style>
<Script language = "javascript">
<!-
Функция 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";
вернуть это;
};
jsauto.prototype.directionKey = function () {с (это)
{{
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)?
_o.childnodes [_c] .classname = "mouseover";
}
if (e == 38 && _s)
{{
_o.childnodes [_c] .classname = "mouseout";
_c-<= 0?
_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;
}
}};
// museevent.
jsauto.prototype.domouseover = function (obj) {с (это)
{{
_o.childnodes [_c] .classname = "mouseout";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domouseout = function (obj)
{{
obj.tagname == "div"?
};
jsauto.prototype.doclick = function (msg) {с (это)
{{
if (_r)
{{
_r.value = msg;
_o.style.visibility = "hidden";
}
еще
{{
ALERT ("javaScript AutoCoplete Error:/n/n не может получить объект возврата.");
возвращаться;
}
}};
// метод объекта;
jsauto.prototype.item = function (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) {с (это)
{{
_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 () {с (это)
{{
if (_f && _v! = "")
{{
_o.style.left = _r.offsetleft;
_o.style.width = _r.offsetwidth;
_o.style.top = _r.offsettop + _r.OffsetHeight;
_O.Style.visibuby = "visible";
}
еще
{{
_o.style.visibility = "hidden";
}
}};
jsauto.prototype.handleevent = function (fvalue, fid, event) {с (это)
{{
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 = true;
}
}
_i?
if (_f)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.directionKey ();
}
еще
{{
_c = 0;
_o.childnodes [_c] .classname = "mouseover";
_s = true;
}
}
}};
window.onerror = новая функция («вернуть true;»);
//->
</Script>
</Head>
<Тело>
<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 («Анжела, гениальлау»);
jsautoinstance.item ("Never-online");
//->
</Script>
<Center> Пожалуйста, введите букву в поле ввода: </center>
</Body>
</Html>