De nombreux sites Web ont maintenant cet effet. , vous devez utiliser le truc de l'Ajax.
Copier le code du code comme suit:
<html>
<adal>
<Title> Zone de texte avec correspondance d'entrée </Title>
<style>
corps, div {
Font-Family: Verdana;
hauteur de ligne: 100%;
taille de police: 10 pt;
}
saisir {
Largeur: 320px;
}
H1 {
Texte-aligne: Centre;
taille de police: 2.2EM;
}
#divc {
Border: 1px solide # 555;
}
.des {
Largeur: 500px;
Color d'arrière-plan: Lightylow;
Border: 1px solide # 555;
rembourrage: 25px;
marge: 25px;
}
.MouseOver {
Couleur: #ffffff;
Color d'arrière-plan: point culminant;
Largeur: 100%;
curseur: par défaut;
}
.Mouseout {
Couleur: # 000;
Largeur: 100%;
Color d'arrière-plan: #FFFFFF;
curseur: par défaut;
}
</ style>
<Script linguisse = "javascript">
<! -
fonction 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.visibilité = "Hidden";
this._o.style.position = "absolu";
this._o.style.zindex = "9999";
this._o.style.overflow = "auto";
this._o.style.height = "50";
retourner ceci;
};
jsauto.prototype.directionKey = function () {avec (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.visibilité == "Visible")
{{
_r.value = _x [_c];
_o.style.visibilité = "Hidden";
}
}
si (! _s)
{{
_c = 0;
_o.childNodes [_c] .classname = "MouseOver";
_s = true;
}
}};
// Mousevent.
jsauto.prototype.domouseover = function (obj) {avec (this)
{{
_o.childNodes [_c] .className = "Mouseout";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domouseout = fonction (obj)
{{
obj.tagname == "div"?
};
jsauto.prototype.doclick = function (msg) {avec (this)
{{
if (_r)
{{
_r.value = msg;
_o.style.visibilité = "Hidden";
}
autre
{{
alert ("JavaScript AutoClete Error: / n / n ne peut pas obtenir un objet de retour.");
retour;
}
}};
// Méthode d'objet;
jsauto.prototype.item = fonction (msg)
{{
if (msg.indexof (",")> 0)
{{
var arrmsg = msg.split (",");
pour (var i = 0; i <arrmsg.length; i ++)
{{
Arrmsg [i]?
}
}
autre
{{
this._msg.push (msg);
}
this._msg.sort ();
};
jsauto.prototype.append = function (msg) {avec (this)
{{
_i?
_x.push (msg);
var div = document.CreateElement ("div");
// Bind Event à l'objet.
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> $ $ </strong>");
div.style.fontfamily = "Verdana";
_o.ApendChild (div);
}};
jsauto.prototype.display = function () {avec (this)
{{
if (_f && _v! = "")
{{
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetwidth;
_o.style.top = _r.offsettop + _r.offsetHeight;
_o.style.visibilité = "visible";
}
autre
{{
_o.style.visibilité = "Hidden";
}
}};
jsauto.prototype.handleevent = fonction (fValue, fid, événement) {avec (this)
{{
var re;
_e = événement;
var e = _e.KeyCode?
_x = [];
_f = false;
_r = document.getElementById (FID);
_v = fValue;
_i = eval (_i);
re = new regexp ("^" + fvalue + "", "i");
_o.innerhtml = "";
pour (var i = 0; i <_msg.length; i ++)
{{
if (re.test (_msg [i]))
{{
_i.append (_msg [i]);
_f = true;
}
}
_i? _i.display (): alert ("ne peut pas obtenir d'instance");
if (_f)
{{
if ((e == 38 || e == 40 || e == 13))
{{
_i.directionKey ();
}
autre
{{
_c = 0;
_o.childNodes [_c] .classname = "MouseOver";
_s = true;
}
}
}};
window.onerror = new function ("return true;");
// ->
</cript>
</ Head>
<body>
<div id = "divc">
<! - Ceci est le conteneur d'observance automatique .-->
</div>
<div align = "Center">
<entrée onkeyup = "jsautoinstance.handleevent (this.value, 'auto', événement)" id = "auto">
</div>
<Script linguisse = "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 ("bluiracle, bleu");
jsautoinstance.item ("Angela, Geniuslau");
jsautoinstance.item ("Never-online");
// ->
</cript>
<FECT> Veuillez saisir une lettre dans la boîte de saisie: </ Center>
</docy>
</html>