Muchos sitios web ahora tienen este efecto. , necesitas usar la cosa de Ajax.
Copiar código del código de la siguiente manera:
<html>
<Evista>
<title> cuadro de texto con coincidencia de entrada </title>
<estilo>
cuerpo, div {
Font-Family: Verdana;
Alganche de línea: 100%;
tamaño de fuente: 10pt;
}
aporte {
Ancho: 320px;
}
H1 {
Text-Align: Center;
tamaño de fuente: 2.2em;
}
#divc {
borde: 1px Solid #555;
}
.Des {
Ancho: 500px;
Color de fondo: Lightyellow;
borde: 1px Solid #555;
relleno: 25px;
margen-top: 25px;
}
. Mouseover {
Color: #ffffff;
Color de fondo: resaltado;
Ancho: 100%;
cursor: predeterminado;
}
. RouseOut {
Color:#000;
Ancho: 100%;
Color de fondo: #ffffff;
cursor: predeterminado;
}
</style>
<Script language = "javaScript">
<!-
Función 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";
devolver esto;
};
jsauto.prototype.directionKey = function () {con (esto)
{{
var e = _e.keycode?
var l = _o.childnodes.length;
(_c> l-1 || _c <0)? _s = falso: "";
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 = verdadero;
}
}};
// mouseevent.
jsauto.prototype.domeover = function (obj) {con (esto)
{{
_o.childnodes [_c] .classname = "mouseout";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domeout = function (obj)
{{
obj.tagname == "div"?
};
jsauto.prototype.doClick = function (msg) {con (esto)
{{
if (_r)
{{
_r.value = msg;
_o.style.visibility = "Hidden";
}
demás
{{
alerta ("JavaScript AutoComplete Error:/N/N no puede obtener el objeto de retorno");
devolver;
}
}};
// Método de objeto;
jsauto.prototype.item = function (msg)
{{
if (msg.indexof (",")> 0)
{{
var arrmsg = msg.split (",");
para (var i = 0; i <arrmsg.length; i ++)
{{
ARRMSG [i]?
}
}
demás
{{
this._msg.push (msg);
}
this._msg.sort ();
};
jsauto.prototype.append = function (msg) {con (esto)
{{
_i? "": _i = eval (_i);
_x.push (msg);
var div = document.createElement ("div");
// Binde el evento al objeto.
div.onmouseover = function () {_ i.domeover (this)};
div.onmouseOut = function () {_ i.domeout (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 () {con (esto)
{{
if (_f && _v! = "")
{{
_o.style.left = _r.OffSetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsettop + _r.offsetheight;
_o.style.visibility = "Visible";
}
demás
{{
_o.style.visibility = "Hidden";
}
}};
jsauto.prototype.handleevent = function (fValue, fid, evento) {con (esto)
{{
var re;
_e = evento;
var e = _e.keycode?
_x = [];
_f = falso;
_r = document.getElementById (fid);
_v = fValue;
_i = eval (_i);
re = new Regexp ("^" + fValue + "", "i");
_o.innerhtml = "";
para (var i = 0; i <_msg.length; i ++)
{{
if (re.test (_msg [i]))
{{
_i.append (_msg [i]);
_f = verdadero;
}
}
_i? _i.display (): alerta ("no puede obtener instancia");
if (_f)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.DirectionKey ();
}
demás
{{
_c = 0;
_o.childnodes [_c] .classname = "mouseover";
_s = verdadero;
}
}
}};
Window.oNerror = nueva función ("return true;");
//->
</script>
</ablo>
<Body>
<div id = "divc">
<!-Este es el contenedor de autocompletar .-->
</div>
<div align = "centro">
<input onKeyUp = "jSaUteinstance.handleevent (this.value, 'auto', evento)" 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 -Star, 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 -Star, 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 -Star, B -star, 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 -Star, f -star, 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>
<Centente> Ingrese una letra en el cuadro de entrada: </center>
</body>
</Html>