多くの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>