Viele Websites haben diesen Effekt. Sie müssen das Ajax -Ding verwenden.
Kopieren Sie den Code -Code wie folgt:
<html>
<kopf>
<title> Textfeld mit Eingabeübereinstimmung </title>
<Styles>
Körper, div {
Schriftfamilie: Verdana;
Linienhöhe: 100%;
Schriftgröße: 10pt;
}
Eingabe {
Breite: 320px;
}
H1 {
Text-Align: Mitte;
Schriftgröße: 2.2em;
}
#DIVC {
Grenze: 1PX Solid #555;
}
.des {
Breite: 500px;
Hintergrundfarbe: Lightybell;
Grenze: 1PX Solid #555;
Polsterung: 25px;
Randtop: 25px;
}
.Mouseover {
Farbe: #ffffff;
Hintergrundfarbe: Highlight;
Breite: 100%;
Cursor: Standard;
}
.Mouseout {
Farbe:#000;
Breite: 100%;
Hintergrundfarbe: #ffffff;
Cursor: Standard;
}
</style>
<Script Language = "JavaScript">
<!-
Funktion JSAUTO (Instanzenname, Objid)
{{{{
this._msg = [];
this._x = null;
this._o = document.getElementById (objid);
if (! this._o) return;
this._f = null;
this._i = instaconName;
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";
gib dies zurück;
};
jsauto.prototype.directionKey = function () {mit (this)
{{{{
var e = _e.keycode?
var l = _o.childnodes.length;
(_c> l-1 || _c <0)?
if (e == 40 && _s)
{{{{
_o.childnodes [_c] .className = "mausout";
(_c> = l-1)?
_o.childnodes [_c] .classname = "mouseover";
}
if (e == 38 && _s)
{{{{
_o.childnodes [_c] .className = "mausout";
_c-<= 0?
_o.childnodes [_c] .classname = "mouseover";
}
if (e == 13)
{{{{
if (_o.childnodes [_c] && _o.style.visibility == "sichtbar")
{{{{
_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) {mit (this)
{{{{
_o.childnodes [_c] .className = "mausout";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domouseout = function (OBJ)
{{{{
obj.tagname == "div"?
};
jsauto.prototype.doclick = function (msg) {mit (this)
{{{{
if (_r)
{{{{
_r.value = msg;
_o.style.visibility = "Hidden";
}
anders
{{{{
alert ("JavaScript AutoComplete error:/n/n kann kein Rückgabeobjekt erhalten.");
zurückkehren;
}
}};
// Objektmethode;
JSAUTO.PROTOTYPE.ITEM = FUNKTION (MSG)
{{{{
if (msg.indexof (",")> 0)
{{{{
var arrmsg = msg.split (",");
für (var i = 0; i <arrmsg.length; i ++)
{{{{
arrmsg [i]?
}
}
anders
{{{{
this._msg.push (msg);
}
this._msg.sort ();
};
jsauto.prototype.append = function (msg) {mit (this)
{{{{
_i? "": _i = eval (_i);
_x.push (msg);
var div = document.createelement ("div");
// Ereignis an das Objekt binden.
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 = "Mausout";
if (_v) div.innerhtml = msg.replace (re, "<strong> $ 1 </strong>");
Div.Style.Fontfamily = "Verdana";
_o.appendchild (div);
}};
jsauto.prototype.display = function () {mit (this)
{{{{
if (_f && _v! = "")
{{{{
_o.style.left = _r.offsetleft;
_o.style.width = _r.offsetwidth;
_o.style.top = _r.offsettop + _r.offseteight;
_o.style.visibility = "sichtbar";
}
anders
{{{{
_o.style.visibility = "Hidden";
}
}};
jsauto.prototype.handleEvent = function (fvalue, fid, Ereignis) {mit (this)
{{{{
var re;
_e = Ereignis;
var e = _e.keycode?
_x = [];
_f = false;
_r = document.getElementById (fid);
_v = fValue;
_i = eval (_i);
re = new Regexp ("^" + fvalue + "", "i");
_o.innerhtml = "";
für (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 ();
}
anders
{{{{
_c = 0;
_o.childnodes [_c] .classname = "mouseover";
_s = true;
}
}
}};
window.onError = new function ("return true;");
//->
</Script>
</Head>
<body>
<div id = "divc">
<!-Dies ist der automatische Container .-->
</div>
<Div Align = "Center">
<Eingabe onkeyUp = "jsautoinstance
</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 ("bludeestiny");
jsautoinstance.item ("bluemiracle, blau");
jsautoinstance.item ("Angela, Geniuslau");
jsautoinstance.item ("Never-online");
//->
</Script>
<Center> Bitte geben Sie einen Brief in das Eingabefeld ein: </center>
</Body>
</Html>