ตอนนี้เว็บไซต์จำนวนมากมีเอฟเฟกต์นี้ คุณต้องใช้สิ่งที่อาแจ็กซ์
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<title> กล่องข้อความพร้อมอินพุตจับคู่ </title>
<style>
ร่างกาย div {
Font-Family: Verdana;
ความสูงของสาย: 100%;
ขนาดตัวอักษร: 10pt;
-
ป้อนข้อมูล {
ความกว้าง: 320px;
-
H1 {
TEXT-ALIGN: CENTER;
ขนาดตัวอักษร: 2.2EM;
-
#divc {
ชายแดน: 1px Solid #555;
-
.DES {
ความกว้าง: 500px;
พื้นหลังสี: Lightyellow;
ชายแดน: 1px Solid #555;
Padding: 25px;
ขอบด้านบน: 25px;
-
.MouseOver {
สี: #ffffff;
พื้นหลังสี: ไฮไลต์;
ความกว้าง: 100%;
เคอร์เซอร์: ค่าเริ่มต้น;
-
.mouseout {
สี:#000;
ความกว้าง: 100%;
พื้นหลังสี: #ffffff;
เคอร์เซอร์: ค่าเริ่มต้น;
-
</style>
<ภาษาสคริปต์ = "JavaScript">
-
ฟังก์ชั่น jsauto (instancename, objid)
-
this._msg = [];
this._x = null;
this._o = document.getElementById (objid);
ถ้า (! this._o) กลับมา;
this._f = null;
this._i = Instancename;
this._r = null;
this._c = 0;
this._s = false;
this._v = null;
this._o.style.visibility = "ซ่อน";
this._o.style.position = "สัมบูรณ์";
this._o.style.zindex = "9999";
this._o.style.overflow = "auto";
this._o.style.height = "50";
คืนสิ่งนี้;
-
jsauto.prototype.directionKey = function () {ด้วย (นี้)
-
var e = _e.keycode? _e.keycode: _e.which;
var l = _o.childnodes.length;
(_c> l-1 || _c <0)? _s = false: "";
ถ้า (e == 40 && _s)
-
_o.childnodes [_c] .className = "mouseout";
(_c> = l-1)? _c = 0: _c ++;
_o.childnodes [_c] .className = "MouseOver";
-
ถ้า (e == 38 && _s)
-
_o.childnodes [_c] .className = "mouseout";
_c-<= 0? _c = _o.childnodes.length-1: "";
_o.childnodes [_c] .className = "MouseOver";
-
ถ้า (e == 13)
-
if (_o.childnodes [_c] && _o.style.visibility == "มองเห็นได้")
-
_r.value = _x [_c];
_o.style.visibility = "ซ่อน";
-
-
ถ้า (! _s)
-
_c = 0;
_o.childnodes [_c] .className = "MouseOver";
_s = true;
-
-
// MouseEvent
jsauto.prototype.domouseover = function (obj) {ด้วย (นี้)
-
_o.childnodes [_c] .className = "mouseout";
_c = 0;
obj.tagname == "div"?
-
jsauto.prototype.domouseout = function (obj)
-
obj.tagname == "div"?
-
jsauto.prototype.doclick = function (msg) {ด้วย (นี้)
-
ถ้า (_r)
-
_r.value = msg;
_o.style.visibility = "ซ่อน";
-
อื่น
-
การแจ้งเตือน ("JavaScript Autocomplete ข้อผิดพลาด:/n/n ไม่สามารถรับวัตถุส่งคืนได้");
กลับ;
-
-
// วิธีวัตถุ;
jsauto.prototype.item = function (msg)
-
if (msg.indexof (",")> 0)
-
var arrmsg = msg.split (",");
สำหรับ (var i = 0; i <arrmsg.length; i ++)
-
arrmsg [i]?
-
-
อื่น
-
this._msg.push (msg);
-
this._msg.sort ();
-
jsauto.prototype.append = function (msg) {ด้วย (นี้)
-
_i? "": _i = eval (_i);
_x.push (ผงชูรส);
var div = document.createElement ("div");
// ผูกเหตุการณ์กับวัตถุ
div.onmouseover = function () {_ i.domouseover (นี่)};
div.onmouseout = function () {_ i.domouseout (นี่)};
div.onclick = function () {_ i.doclick (msg)};
var re = ใหม่ 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 () {ด้วย (นี้)
-
ถ้า (_f && _v! = "")
-
_o.style.left = _r.offsetleft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsettop + _r.offsetheight;
_o.style.visibility = "มองเห็นได้";
-
อื่น
-
_o.style.visibility = "ซ่อน";
-
-
jsauto.prototype.handleevent = function (fvalue, fid, เหตุการณ์) {ด้วย (นี้)
-
var re;
_e = เหตุการณ์;
var e = _e.keycode? _e.keycode: _e.which;
_x = [];
_f = false;
_r = document.getElementById (fid);
_v = fvalue;
_i = eval (_i);
re = ใหม่ regexp ("^" + fvalue + "", "i");
_o.innerhtml = "";
สำหรับ (var i = 0; i <_msg.length; i ++)
-
if (re.test (_msg [i]))
-
_i.append (_msg [i]);
_f = true;
-
-
_i?
ถ้า (_f)
-
if ((e == 38 || e == 40 || e == 13))
-
_i.directionKey ();
-
อื่น
-
_c = 0;
_o.childnodes [_c] .className = "MouseOver";
_s = true;
-
-
-
window.onerror = ฟังก์ชั่นใหม่ ("return true;");
-
</script>
</head>
<body>
<div id = "divc">
<!-นี่คือคอนเทนเนอร์อัตโนมัติ->>
</div>
<div align = "center">
<อินพุต onkeyup = "jsautoinstance.handleevent (this.value, 'auto', เหตุการณ์)" 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 -เริ่มต้น 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 -เริ่มต้น 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, A -เริ่มต้น, 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 -เริ่มต้น, 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>
<enter> กรุณากรอกจดหมายในกล่องอินพุต: </enter>
</body>
</html>