最近、従業員登録ページの作成に取り組んでいましたが、その項目の 1 つは会社を登録することです。ただし、会社がすでに登録されている場合は、大文字と小文字を区別せずに、会社名をまったく同じに記述する必要があります。 . なので、JavaScript を使って、IE7 をモデルにしたオートコンプリート機能とスタイルを作成する予定ですが、まだ欠点がたくさんあります。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>www.jb51.net スクリプト ハウスのオートコンプリート機能</title> <style type="text/css"> <!-- .select{background-color:highlight;color:#FFF}.unselect{background-color:#FFF;color:#000} --> </style> <form method="post" action=""> <p><label for="test">テスト:</label><input type="text" name="test" id="test"></p> </form> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] <!-- var z = new Array('a', 'aback', 'abandom', 'abashed', 'abate', 'abattoir', 'abbess', 'abbey', 'baby', 'baby boom', 'baby carriage', 'babyish', 'baby-sit'); function sO(v) { var d = document.createElement('DIV'); with(d.style) { padding = '0 6px 0 5px'; cursor = 'default'; textAlign = 'left'; } d.className = 'unselect'; d.onmousemove = function(){d.className = 'select';}; d.onmouseout = function(){d.className = 'unselect';}; d.onmousedown = function() { a.value = d.innerHTML; b.style.visibility = 'hidden'; a.focus(); }; d.innerHTML = v; b.appendChild(d); } function fT() { var y = new Array; var q = 0; for(var p = 0; p < z.length; p++) { if(z[p].substring(0, a.value.length).toLowerCase() == a.value.toLowerCase() && z[p].length > a.value.length) { y[q] = z[p]; q++; } } if(y.length > 0) { b.innerHTML = ''; for(var r = 0; r < y.length; r++) { sO(y[r]); } b.style.visibility = 'visible'; } else { b.style.visibility = 'hidden'; } } function cP(o, a) { var d = 0; while(o) { d += o[a]; o = o.offsetParent; } return d; } function kR(e) { if(a.value != '') fT(); else b.style.visibility = 'hidden'; var key = e.keyCode; switch(key) { case 13: a.value = b.childNodes[t].innerHTML; b.style.visibility = 'hidden'; a.focus(); break; case 27: b.style.visibility = 'hidden'; a.focus(); break; case 38: if(t <= 0 || t > b.childNodes.length - 1) t = b.childNodes.length; t--; b.childNodes[t].className = 'select'; break; case 40: if(t >= b.childNodes.length - 1) t = -1; t++; b.childNodes[t].className = 'select'; break; default: return; } document.getElementsByTagName('form')[0].onsubmit = function() { if(b.style.visibility == 'visible') return false; }; } window.onload = function() { a = document.getElementById('test'); a.autocomplete = 'off'; a.onblur = function() {b.style.visibility = 'hidden';}; t = -1; if(a.createTextRange) { a.onkeyup = new Function('return kR(event);'); } else { a.onkeyup = kR; } b = document.createElement('DIV'); with(b.style) { padding = '0 0 15px'; backgroundColor = '#FFF'; border = '1px solid #000'; font = '11px Tahoma'; zIndex = '2'; position = 'absolute'; left = cP(a, 'offsetLeft') + 'px'; top = cP(a, 'offsetTop') + a.offsetHeight - 2 + 'px'; width = a.offsetWidth - 2 + 'px'; visibility = 'hidden'; } document.body.appendChild(b); } -->
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
