<!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>
分享到:
相关推荐
js 实现 输入框自动完成功能! 值得下载看看!资源免费,大家分享!!
ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成...
jquery输入框提示自动完成功能jquery输入框提示自动完成功能jquery输入框提示自动完成功能jquery输入框提示自动完成功能
输入框 自动完成 AJAX,可以与JAVA 或者 NET 后台代码交互,一款比较好的 自动完成功能
这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。主要参数介绍: serviceUrl:Ajax 请求的 URL; lookup:本地数据数组; minChars:...
C#dataGridView中输入框自动提示、自动完成、自动补全功能
c#textbox输入框自动提示、自动完成、自动补全功能.rar 详情请参考:http://blog.csdn.net/testcs_dn/article/details/45293253
c#TextBox输入框自动提示、自动完成、自动补全功能
基于jQuery+ASP.NET技术实现的输入框提示自动完成功能程序代码。
自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分。
;height:20px;font-size:14pt;" placeholder="请输入a或b模拟效果" id="o" onkeyup="autoComplete.start(event)"> <!--自动完成 DIV--> </div>
jQuery结合PHP+Mysql完成输入框自动输入功能,可以下载下来学习下
一直自制的自动提示控件。基于jquery的。可以让页面中,所有calss= 'needToRemember'的 type="text"控件拥有自动完成功能。演示文档可以在 html/test.html 中看到。
js输入首字母自动完成代码是一款类似百度搜索的输入框自动完成功能。
本文实例讲述了Android编程实现输入框动态自动提示功能。分享给大家供大家参考,具体如下: 关于AutoCompleteTextView的使用,我想大家并不陌生,对其设定上Adapter后系统便能自己识别与匹配了。近期 一个项目中,...
使用jQuery+CSS 做了一个输入框自动完成的功能,代码不多,有例子,简单易懂。有HTML和JSP两个格式的。使用到了JSON数据格式。
VC++自动完成功能的实现,通俗来说其实就是输入提示功能,只要你在输入框输入任意字符,程序会查找出与此对应最有可能出现的词组并显示在输入框中,如果词库够丰富的话,那么程序会变得更加智能。
本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你...