js实现form自动完成功能_javascript技巧

最近我做一个员工注册页面, 有一项是注册公司, 但是如果公司已经被注册, 要求公司名称写的完全一样, 不能有大小写区别等, 所以我打算使用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">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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]