`
baiiiuuu
  • 浏览: 42684 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

输入框自动完成功能

    博客分类:
  • web
阅读更多
<!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 实现 输入框自动完成功能

    js 实现 输入框自动完成功能! 值得下载看看!资源免费,大家分享!!

    ASP仿Google输入框提示_自动完成功能

    ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成...

    c#textbox输入框自动提示、自动完成、自动补全功能

    自动完成功能是在用户输入过程中,当达到一定条件(如连续输入几个字符)时,TextBox会自动填充剩余部分,以完成一个完整的单词或短语。C#中,可以通过使用System.Windows.Forms.AutoCompleteSource和System.Windows...

    输入框 自动完成 AJAX

    标题中的“输入框自动完成AJAX”是一种常见的前端开发技术,用于提高用户在网页上的输入效率。自动完成功能,也称为自动填充或建议输入,它根据用户在输入框中键入的内容,动态地提供可能的匹配选项。这种功能在搜索...

    jQuery select选择框/文本输入框自动完成/自动提示插件

    这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。主要参数介绍: serviceUrl:Ajax 请求的 URL; lookup:本地数据数组; minChars:...

    jsp+ajax实现输入框自动搜索

    本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能,类似于百度搜索。 一、标题:jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二、描述:类似于百度的搜索一样...

    ASP源码—结合AJAX实现输入框提示(自动完成)修正版.zip

    这个压缩包文件“ASP源码—结合AJAX实现输入框提示(自动完成)修正版.zip”显然包含了利用ASP技术和AJAX(异步JavaScript和XML)来实现输入框自动完成功能的源代码。下面我们将深入探讨这两个技术以及它们如何协同...

    C#dataGridView中输入框自动提示、自动完成、自动补全功能

    在实际应用中,为了提高用户交互体验,我们常常需要为`dataGridView`的输入框添加自动提示、自动完成和自动补全功能。这些功能能够帮助用户更快地找到或输入他们想要的数据,减少错误输入的可能性。 自动提示...

    仿google输入框自动完成输入源码

    "仿google输入框自动完成输入源码" 这个标题指的是一个编程项目,其目标是模仿Google搜索框的自动填充(Autocomplete)功能。在实际的网页开发中,这样的功能可以极大地提升用户体验,因为它允许用户在输入查询时...

    ASP输入框自动完成查询实例

    自动完成功能可以显著提升用户体验,因为它减少了用户手动输入完整关键词的需要。此外,通过优化查询算法,还可以避免在大量数据中搜索时的延迟,使功能更加流畅。 总结起来,这个ASP输入框自动完成查询实例是一个...

    输入框自动完成、补全Email提示插件

    在IT行业中,输入框自动完成和补全功能已经成为提高用户交互体验的重要手段,尤其是在处理大量数据输入时,如电子邮件地址的填写。本文将详细探讨这一技术,并以“输入框自动完成、补全Email提示插件”为例,阐述其...

    textbox输入框自动提示功能

    这些控件通常提供内置的自动完成功能。 5. **UI更新**:在找到匹配项后,我们需要更新用户界面,显示一个下拉列表或类似的元素,其中包含建议的选项。这通常涉及到对控件的属性设置,如`Items`(存储提示项)和`...

    C#实现输入框自动完成

    以下是对“C#实现输入框自动完成”这一主题的详细解释。 首先,我们需要了解C#中用于实现自动完成的基础控件,通常是TextBox。TextBox控件是Windows Forms和WPF应用中常用的文本输入控件。在.NET Framework中,我们...

    jquery输入框提示自动完成功能.rar

    本教程将深入探讨如何利用jQuery实现输入框的提示自动完成功能,这种功能常见于搜索引擎、登录表单等,可以极大地提高用户体验。 首先,我们需要一个基本的HTML结构,包括一个input元素,作为用户输入的文本框。...

    基于jquery实现的类似百度搜索的输入框自动完成功能

    为了防止浏览器默认的自动完成功能干扰我们的自定义实现,需要在输入框中添加 `autocomplete="off"` 属性。 ```javascript $searchInput.attr('autocomplete','off'); ``` 3. **创建动态下拉列表**: 创建一个...

    仿baidu google 输入框自动完成

    【标题】"仿baidu google 输入框自动完成" 涉及的核心技术是JavaScript实现的自动补全功能,这是Web开发中常见的一种交互设计,通常用于提升用户输入体验,尤其在搜索框中应用广泛。自动补全功能允许用户在输入过程...

    js实现输入框输入的自动匹配功能

    在JavaScript编程中,输入框自动匹配功能是一种常见的用户体验优化手段,尤其在搜索、表单填写等场景中广泛应用。这种功能可以实时地根据用户输入的内容,从预设的数据集中匹配并展示可能的选项,帮助用户快速找到...

    基于jQuery+ASP.NET技术实现的输入框提示自动完成功能程序代码

    在网页开发中,提高用户体验是至关重要的,而输入框的自动完成功能正是提升交互性的一个有效手段。本文将深入探讨如何使用jQuery和ASP.NET技术来实现这一功能,旨在帮助开发者构建更高效、友好的前端界面。 jQuery...

Global site tag (gtag.js) - Google Analytics