最近我做一個員工註冊頁面, 有一項是註冊公司, 但是如果公司已經被註冊, 要求公司名稱寫的完全一樣, 不能有大小寫區別等, 所以我打算使用Javascript寫一個類比自動完成的功能, 樣式仿照了IE7的, 還有很多不足, 希望大家支援.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> </head> <body> <form method="post" action=""> <p><label for="test">Test:</label><input type="text" name="test" id="test" /></p> </form> <script type="text/javascript"> <!-- 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); } --> </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
