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

来源：乌哈旅游

最近我做一个员工注册页面, 有一项是注册公司, 但是如果公司已经被注册, 要求公司名称写的完全一样, 不能有大小写区别等, 所以我打算使用Javascript写一个模拟自动完成的功能, 样式仿照了IE7的, 还有很多不足, 希望大家支持.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.gxlcms.com 脚本之家 自动完成功能</title> 
<style type="text/css"> 
 
</style> 
</head> 
<body> 
 
<script type="text/javascript"> 
 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需刷新才能执行]