Muitos sites agora têm esse efeito. , você precisa usar a coisa do Ajax.
Copie o código do código da seguinte forma:
<html>
<head>
<title> Caixa de texto com partida de entrada </ititle>
<estilo>
corpo, div {
Fonte-família: Verdana;
altura da linha: 100%;
tamanho de fonte: 10pt;
}
entrada {
Largura: 320px;
}
H1 {
Alinhamento de texto: centro;
tamanho de fonte: 2.2em;
}
#divc {
borda: 1px sólido #555;
}
.des {
Largura: 500px;
Background-Color: Lightyellow;
borda: 1px sólido #555;
preenchimento: 25px;
Margin-top: 25px;
}
.MouseOver {
Cor: #ffffff;
Background-Color: Destaque;
largura: 100%;
Cursor: padrão;
}
.mouseout {
Cor:#000;
largura: 100%;
Background-Color: #ffffff;
Cursor: padrão;
}
</style>
<Script Language = "JavaScript">
<!-
função jsauto (nome da instancename, objid)
{{
this._msg = [];
this._x = null;
this._o = document.getElementById (objid);
if (! this._o) retornar;
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";
devolver isso;
};
jsauto.prototype.directionKey = function () {com (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)?
_o.childnodes [_c] .className = "mouseOver";
}
if (e == 38 && _s)
{{
_o.childnodes [_c] .className = "mouseout";
_c-<= 0?
_o.childnodes [_c] .className = "mouseOver";
}
se (e == 13)
{{
if (_o.childnodes [_c] && _o.style.visibility == "visível")
{{
_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) {com (this)
{{
_o.childnodes [_c] .className = "mouseout";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domouseout = function (obj)
{{
obj.tagname == "div"?
};
jsauto.prototype.doclick = function (msg) {com (this)
{{
if (_r)
{{
_r.Value = msg;
_o.style.visibility = "Hidden";
}
outro
{{
alerta ("JavaScript Autocomplete Error:/n/n não pode obter objeto de retorno.");
retornar;
}
}};
// método de objeto;
jsauto.prototype.item = função (msg)
{{
if (msg.indexof (",")> 0)
{{
var Arrmsg = msg.split (",");
for (var i = 0; i <arrmsg.length; i ++)
{{
Arrmsg [i]?
}
}
outro
{{
this._msg.push (msg);
}
this._msg.sort ();
};
jsauto.prototype.append = function (msg) {com (this)
{{
_i?
_x.push (msg);
var div = document.createElement ("div");
// vinte o evento ao objeto.
div.OnMouseOver = function () {_.domouseOver (this)};
div.OnMouseOut = function () {_.domouseout (this)};
div.OnClick = function () {_ i.doclick (msg)};
var re = novo 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 () {com (this)
{{
if (_f && _v! = "")
{{
_o.style.left = _r.offsetleft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visível";
}
outro
{{
_o.style.visibility = "Hidden";
}
}};
jsauto.prototype.HandleEvent = function (fvalue, fid, evento) {com (this)
{{
var re;
_e = evento;
var e = _e.KeyCode?
_x = [];
_f = false;
_r = document.getElementById (fid);
_v = fValue;
_i = avaliar (_i);
re = novo 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?
if (_f)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.directionKey ();
}
outro
{{
_c = 0;
_o.childnodes [_c] .className = "mouseOver";
_s = true;
}
}
}};
window.onerror = nova função ("return true;");
//->
</Script>
</head>
<Body>
<div id = "divc">
<!-este é o contêiner de preenchimento automático .-->
</div>
<div align = "Center">
<input onkeyup = "jsautoInstance.HandleEvent (this.value, 'Auto', evento)" id = "Auto">
</div>
<Script Language = "JavaScript">
<!-
var jsaUToInstance = novo JSAuto ("JSAutoInstance", "Divc");
JSAUTOINTSTANCE.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 ("bluestiny");
JSAUTOINTSTANCE.Item ("Bluemiracle, Blue");
JSAUTOINTSTANCE.Item ("Angela, Geniuslau");
jsautoInstance.item ("nunca-online");
//->
</Script>
<Center> Por favor, insira uma carta na caixa de entrada: </fente>
</Body>
</html>