输入框自动完顺利能
输入框自动完成功能
<!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>
<!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>