<!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输入框提示_自动完成...
自动完成功能是在用户输入过程中，当达到一定条件（如连续输入几个字符）时，TextBox会自动填充剩余部分，以完成一个完整的单词或短语。C#中，可以通过使用System.Windows.Forms.AutoCompleteSource和System.Windows...
标题中的“输入框自动完成AJAX”是一种常见的前端开发技术，用于提高用户在网页上的输入效率。自动完成功能，也称为自动填充或建议输入，它根据用户在输入框中键入的内容，动态地提供可能的匹配选项。这种功能在搜索...
这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。主要参数介绍： serviceUrl：Ajax 请求的 URL； lookup：本地数据数组； minChars：...
本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能，类似于百度搜索。 一、标题：jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二、描述：类似于百度的搜索一样...
这个压缩包文件“ASP源码—结合AJAX实现输入框提示(自动完成)修正版.zip”显然包含了利用ASP技术和AJAX（异步JavaScript和XML）来实现输入框自动完成功能的源代码。下面我们将深入探讨这两个技术以及它们如何协同...
在实际应用中，为了提高用户交互体验，我们常常需要为`dataGridView`的输入框添加自动提示、自动完成和自动补全功能。这些功能能够帮助用户更快地找到或输入他们想要的数据，减少错误输入的可能性。 自动提示...
"仿google输入框自动完成输入源码" 这个标题指的是一个编程项目，其目标是模仿Google搜索框的自动填充（Autocomplete）功能。在实际的网页开发中，这样的功能可以极大地提升用户体验，因为它允许用户在输入查询时...
自动完成功能可以显著提升用户体验，因为它减少了用户手动输入完整关键词的需要。此外，通过优化查询算法，还可以避免在大量数据中搜索时的延迟，使功能更加流畅。 总结起来，这个ASP输入框自动完成查询实例是一个...
在IT行业中，输入框自动完成和补全功能已经成为提高用户交互体验的重要手段，尤其是在处理大量数据输入时，如电子邮件地址的填写。本文将详细探讨这一技术，并以“输入框自动完成、补全Email提示插件”为例，阐述其...
这些控件通常提供内置的自动完成功能。 5. **UI更新**：在找到匹配项后，我们需要更新用户界面，显示一个下拉列表或类似的元素，其中包含建议的选项。这通常涉及到对控件的属性设置，如`Items`（存储提示项）和`...
以下是对“C#实现输入框自动完成”这一主题的详细解释。 首先，我们需要了解C#中用于实现自动完成的基础控件，通常是TextBox。TextBox控件是Windows Forms和WPF应用中常用的文本输入控件。在.NET Framework中，我们...
本教程将深入探讨如何利用jQuery实现输入框的提示自动完成功能，这种功能常见于搜索引擎、登录表单等，可以极大地提高用户体验。 首先，我们需要一个基本的HTML结构，包括一个input元素，作为用户输入的文本框。...
为了防止浏览器默认的自动完成功能干扰我们的自定义实现，需要在输入框中添加 `autocomplete="off"` 属性。 ```javascript $searchInput.attr('autocomplete','off'); ``` 3. **创建动态下拉列表**： 创建一个...
【标题】"仿baidu google 输入框自动完成" 涉及的核心技术是JavaScript实现的自动补全功能，这是Web开发中常见的一种交互设计，通常用于提升用户输入体验，尤其在搜索框中应用广泛。自动补全功能允许用户在输入过程...
在JavaScript编程中，输入框自动匹配功能是一种常见的用户体验优化手段，尤其在搜索、表单填写等场景中广泛应用。这种功能可以实时地根据用户输入的内容，从预设的数据集中匹配并展示可能的选项，帮助用户快速找到...
在网页开发中，提高用户体验是至关重要的，而输入框的自动完成功能正是提升交互性的一个有效手段。本文将深入探讨如何使用jQuery和ASP.NET技术来实现这一功能，旨在帮助开发者构建更高效、友好的前端界面。 jQuery...