多くのWebサイトは、このコードを以下に示します。 、Ajaxのものを使用する必要があります。
次のようにコードコードをコピーします。
<html>
<head>
<title>入力マッチ付きテキストボックス</title>
<style>
ボディ、div {
フォントファミリー：Verdana;
ラインハイト：100％;
フォントサイズ：10pt;
}
入力{
幅：320px;
}
H1 {
テキストアライグ：センター;
フォントサイズ：2.2em;
}
#divc {
国境：1pxソリッド＃555;
}
.des {
幅：500px;
背景色：Lightyellow;
国境：1pxソリッド＃555;
パディング：25px;
マージントップ：25px;
}
.MouseOver {
色：#ffffff;
背景色：ハイライト。
幅：100％;
カーソル：デフォルト;
}
.Mouseout {
色：＃000;
幅：100％;
バックグラウンドカラー：#ffffff;
カーソル：デフォルト;
}
</style>
<スクリプト言語= "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（）{with（this）
{{
var e = _e.keycode？_e.keycode：_e.
var l = _o.childnodes.length;
（_c> l-1 || _c <0）_s = "";
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 = true;
}
}};
// MouseEvent。
jsauto.prototype.domouseover = function（obj）{with（this）
{{
_O.CHILDNODES [_C] .ClassName = "Mouseout";
_c = 0;
obj.tagname == "div"？
}};
jsauto.prototype.domouseout = function（obj）
{{
obj.tagname == "div"？
};
jsauto.prototype.doclick = function（msg）{with（this）
{{
if（_r）
{{
_r.value = msg;
_o.style.visibility = "hidden";
}
それ以外
{{
alert（ "JavaScriptオートコンプリートエラー：/n/nは、returnオブジェクトを取得できません。"）;
戻る;
}
}};
//オブジェクトメソッド;
jsauto.prototype.item = function（msg）
{{
if（msg.indexof（ "、"）> 0）
{{
var arrmsg = msg.split（ "、"）;
for（var i = 0; i <arrmsg.length; i ++）
{{
arrmsg [i] this._msg.push（arrmsg [i]）： "";
}
}
それ以外
{{
this._msg.push（msg）;
}
this._msg.sort（）;
};
jsauto.prototype.append = function（msg）{with（this）
{{
_i？ ""：_i = eval（_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（）{with（this）
{{
if（_f && _v！= ""）
{{
_O.Style.Left = _r.OffsetLeft;
_o.style.width = _r.offsetwidth;
_o.style.top = _r.offsettop + _r.offsetheight;
_o.style.visibility = "visible";
}
それ以外
{{
_o.style.visibility = "hidden";
}
}};
jsauto.prototype.handleevent = function（fvalue、fid、event）{with（this）
{{
var re;
_e = event;
var e = _e.keycode？_e.keycode：_e.
_x = [];
_f = false;
_r = document.getElementById（fid）;
_V = fvalue;
_i = eval（_i）;
re = new 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（）;
}
それ以外
{{
_c = 0;
_O.CHILDNODES [_C] .ClassName = "MouseOver";
_s = true;
}
}
}};
window.onerror = new function（ "return true;"）;
//->
</script>
</head>
<body>
<div id = "divc">
<！ - これはオートコンプリートコンテナです。->
</div>
<div align = "center">
<入力onkeyup = "jsautoinstance.handleevent（this.value、 'auto'、event）" id = "auto">
</div>
<スクリプト言語= "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（ "angela、geniuslau"）;
jsautoinstance.item（ "never-online"）;
//->
</script>
<center>入力ボックスに文字を入力してください：</center>
</body>
</html>