本文介绍了一个简单的HTML页面中的JavaScript脚本，该脚本实现了输入框的自动完成功能。当用户在输入框中输入文字时，脚本会从预定义的列表中筛选出匹配项并展示给用户供其选择。
<!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=iso-8859-2" />
<title>Codetrinis Test</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="test1">Test1:</label><input type="text" name="test1" id="test1" />
</p>
<p>
<label for="test2">Test2</label>
<input type="text" name="test2" id="test2" />
</p>
<input type="submit" name="button" id="button" value="Submit" />
</form>
<script type="text/javascript">
<!--
var z = new Array('a', 'aback', 'abandom', 'abashed', 'abate', 'abattoir', 'abbess', 'abbey', 'b', 'baby', 'baby boom', 'baby carriage', 'babyish', 'baby-sit');
function r() {
f = -1;
b.style.visibility = 'hidden';
a.blur();
a.focus();
}
function sO(v) {
var c = document.createElement('DIV');
with(c.style) {
padding = '1px 0 0 5px';
cursor = 'default';
textAlign = 'left';
overflow = 'hidden';
}
c.className = 'unselect';
c.onmousemove = function(){
for(var p = 0; p < b.childNodes.length; p++) {
b.childNodes[p].className = 'unselect';
if(b.childNodes[p] == c) {
c.className = 'select';
f = p;
}
}
};
c.onmousedown = function(e) {
a.value = c.innerHTML;
r();
};
c.innerHTML = v;
b.appendChild(c);
}
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 mS(s) {
f += s;
if(f < 0) f = b.childNodes.length - 1;
if(f > b.childNodes.length - 1) f = 0;
for(var p = 0; p < b.childNodes.length; p++) b.childNodes[p].className = 'unselect';
b.childNodes[f].className = 'select';
}
function kR(e) {
var k = e.keyCode;
switch(k) {
case 13:
if(f != -1) a.value = b.childNodes[f].innerHTML;
case 27:
r();
break;
case 37:
case 39:
break;
case 38:
mS(-1);
break;
case 40:
mS(1);
break;
default:
if(a.value != '') {
f = -1;
fT();
} else b.style.visibility = 'hidden';
return;
}
document.getElementsByTagName('form')[0].onsubmit = function() {
if(b.style.visibility == 'visible') {
a.focus();
return false;
}
};
}
function p() {
with(b.style) {
left = cP(a, 'offsetLeft') + 'px';
top = cP(a, 'offsetTop') + a.offsetHeight - 2 + 'px';
}
}
function kD(e) {
if(!(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 63232 || e.keyCode == 63233)) return true;
kR(e);
return false;
}
function kU(e) {
if(!(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 63232 || e.keyCode == 63233)) kR(e);
return false;
}
window.onload = function() {
a = document.getElementById('test1');
a.autocomplete = 'off';
a.onblur = function() {b.style.visibility = 'hidden';};
f = -1;
if(a.createTextRange) {
a.onkeydown = new Function('return kD(event);');
a.onkeyup = new Function('return kU(event);');
} else {
a.onkeypress = kD;
a.onkeyup = kU;
}
b = document.createElement('DIV');
with(b.style) {
padding = '0 0 14px';
backgroundColor = '#FFF';
border = '1px solid #000';
font = '11px Tahoma';
zIndex = '2';
position = 'absolute';
width = a.offsetWidth - 2 + 'px';
visibility = 'hidden';
}
p();
document.body.appendChild(b);
};
window.onresize = p;
-->
</script>
</body>
</html>
代码:
r = reset (恢复到开始状态)
sO = showOption (显示y列表)
fT = findText (把符合的放到y列表中)
cP = correctPosition (用来兼容IE和FF的位置)
mS = moveSelect (用来移动键盘选择)
kR = keyResponse (敲击键盘后产生的反应)
p = position (用来调整显示层的位置)
kD = keyDown (按住一个键的反应)
kU = keyUp (松开一个键的反应)
a = 输入框
b = 自动完成的显示层
sO 里的 v = value
sO 里的 c = 每个公司层
cP 里的 d = distance
全部的 e = event
kR 里的 k = key
f = 键盘选择的层
cP 里的 o = object
cP 里的 a = attribute
mS 里的 s = step
全部的 p, q, r = 暂时用来循环使用的
fT 里的 y = 根据输入在输入框里的返回出的公司列表
z = 公司列表
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
