面对现实：人们真的不喜欢填写表单，尤其是在需要输入值的时候。这就是Microsoft Outlook之类的应用程序包含自动完成文本框的原因，这些文本框用于检查用户键入的前几个字符并建议输入一个单词给定的列表。 当您开始在地址栏中键入Web地址时，Web浏览器会自动显示URL列表时，也以这种方式工作。
在本教程中，通过一些JavaScript技巧，我们将在Internet Explorer（v5.5和更高版本）和Mozilla（v1.0和更高版本）中创建相同类型的行为。
简单的浏览器检测
首先，我们需要对浏览器进行一些检测，因此这是一些简单的代码来完成此操作（尽管您当然可以使用自己的代码）：
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;这段代码显然不是很健壮，但是对于我们的目的来说已经足够了。 让我们来了解一下这个项目的精髓。
选择文本框
此过程的第一步是创建一种方法，该方法将在文本框中选择一定数量的文本。 我们将此方法textboxSelect() ，它将采用三个参数。 第一个参数是我们希望方法作用的文本框。 第二个参数是可选的，它是选择应该开始的位置（如果省略此参数，则整个文本框都被选中）； 第三个参数（也是可选的）是选择应结束的位置。 如果提供了第二个参数，但没有第三个参数，则从文本框中的文本的开始位置到结尾选择文本框。
我们将首先解决最简单的情况：如果仅提供一个参数，则应使用文本框的本机select()方法选择文本框中的所有文本：
function textboxSelect(oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
...
}
} 请注意，我们使用switch语句确定已填充了多少个参数。如果只有1个，则意味着仅提供了oTextbox 。 接下来，我们将跳过三个参数（同时指定了iStart和iEnd ）的情况。 在这里，我们需要使用浏览器检测来确定要做什么。 对于Internet Explorer，我们将使用文本范围。
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) {
...
}
}
} 在粗体代码中，我们首先为文本框对象创建文本范围。 然后必须将范围设置为其开始和结束坐标。 要移动范围的开始，我们使用moveStart()方法。 此方法有两个参数：要移动的空间类型（“字符”）以及要移动的空间数量。 下一行的moveEnd()方法具有相同的参数。 此处的区别在于moveEnd()要求第二个参数为负数（可将选择的结尾移回一个空格，移回两个空格等）。
为了获得此参数，我们在文本框中取文本长度的负值，并在其中添加iEnd值。 因此，如果iEnd为8，并且文本框包含10个字符，则第二个参数变为–2，并且范围的末尾移回两个字符。 最后，我们调用select()方法在文本框中突出显示范围。
实际上，为Mozilla完成同一件事非常容易。 文本框具有setSelectionRange()方法，该方法带有两个参数：选择的开始和结束。 我们可以直接传递iStart和iEnd ：
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz) {
oTextbox.setSelectionRange(iStart, iEnd);
}
}
} 现在，我们将退后一步，看看给出两个参数（未指定iEnd ）的情况。 本质上，如果有三个参数，我们想做的事情，唯一的区别是iEnd必须等于文本框中的字符数。 我们可以这样实现：
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
/3b#/case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
}请注意，在这种情况下，我们不使用break语句。 我们希望将执行继续到下一种情况，因为我们已将iEnd设置为适当的值。 现在，这在所有三种情况下都可以正常工作。
此功能的最后一部分是将焦点设置到文本框，以便用户键入时将替换所选文本：
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
}替换文本框选择
我们需要做的另一项任务是将当前选定的文本替换为其他文本。 为此，我们将创建textboxReplaceSelect()方法，该方法将使用两个参数：要作用的文本框和要插入的文本。 因为我们将使用范围，所以我们需要为IE和Mozilla创建不同的代码。 首先，让我们看一下IE代码：
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
...
}
oTextbox.focus();
} 在第4行，我们从文档的当前选择中创建了一个范围（我们可以安全地假定它位于文本框中，因为它将在文本框的keypress事件中调用）。 在下一行，我们用给定的字符串替换范围的文本。 在第6行，我们调用范围的collapse()方法，该方法将范围的长度设置为0； 该参数（布尔值）如果值为true，则折叠到范围的末尾；如果值为false，则折叠到范围的开头。 最后，我们选择折叠范围，该范围将光标置于刚插入的文本之后。
在Mozilla中，我们可以通过一些简单的字符串操作来达到相同的效果。 我们可以通过使用文本框的Mozilla selectionStart和selectionEnd属性来确定选择的起点和终点：
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
}在第9行，我们只是保存文本框选择的起点； 我们稍后再用。 第10行看起来很复杂，但实际上，它只是选择之前的字符串和选择之后的字符串，并在它们之间添加sText。 之后，我们只需要复制在IE中所做的操作：将光标设置为在刚插入的文本之后出现。 因此，在第11行，我们将选择范围设置为旧的起点加上所插入文本的长度。 这有效地复制了我们为IE做的工作。
匹配
该过程的下一步是编写一个方法，该方法将搜索字符串数组并返回以给定字符串开头的第一个值（例如，我们需要传入“ a”，并使其返回值中的第一个值）。以字母“ a”开头的数组）。 此方法称为autocompleteMatch（），它将采用两个参数：要匹配的文本和要匹配的值数组。
搜索非常简单-我们只需遍历数组并检查每个值即可。 如果该方法返回true，则返回值。 如果找不到匹配项，则返回空值。 这是完整的代码：
function autocompleteMatch (sText, arrValues) {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
return arrValues[i];
}
}
return null;
} 请注意，要使其正常工作， arrValues的字符串必须按字母顺序排列。
胆量
使用我们构建的其他方法，我们可以进入自动完成文本框的内胆： autocomplete()方法。 此方法将使用三个参数：要作用的文本框，事件对象和可能的值的数组。 假设我们有一个名为arrValues的数组，则调用将如下所示：
<input type="text" onkeypress="return autocomplete(this, event, arrValues)" />我们将首先查看所按下键的键代码：
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
...
}
} 请注意，我们仍然使用EventUtil.formatEvent()方法来格式化事件对象。
我们不想干扰几个键，例如光标键。 在这些特殊情况下，我们将返回true：
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
...
}
}接下来，我们将采用默认情况：用户键入字符时。 在这种情况下，我们需要完成一些步骤：
- 我们必须将所选文本替换为用户键入的字符
- 我们必须尝试使用户输入的文本与之匹配
- 如果找到，我们必须将文本框设置为建议的文本，并将选择内容设置为仅包含用户未键入的字母
这听起来可能很复杂，但是我们已经编写的辅助函数将使其变得更加容易。
重要的第一步是确定用户键入的字符（使用事件对象的keyCode属性（在IE中）和charCode属性（在Mozilla中）上的String.fromCharCode() ））。 我们使用该字符替换当前选择的文本。 然后，我们需要获取文本框中文本的长度。
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
...
}
} 接下来，我们需要使用我们的autocompleteMatch()方法在值数组中搜索匹配值。
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
...
}
} 请求匹配值之后，我们需要确定是否确实找到匹配项。 为此，我们测试sMatch看看它是否为空。 如果不为null，则需要用sMatch替换文本框中的文本。 然后，我们将使用iLen （用户实际键入的文本的长度）来借助我们的textboxSelect()方法仅选择用户未键入的文本。
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
...
}
}毕竟，我们要做的最后一件事是将false的值返回给事件处理程序。 如果我们不这样做，则键入的字符将出现两次。
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}例
当然，最后一步是创建一个测试代码的示例。 事不宜迟，这里是：
<html>
<head>
<title>Autocomplete Textbox Example</title>
<script type="text/javascript">
var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;
function textboxSelect (oTextbox, iStart, iEnd) {
switch(arguments.length) {
case 1:
oTextbox.select();
break;
case 2:
iEnd = oTextbox.value.length;
/* falls through */
case 3:
if (isIE) {
var oRange = oTextbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", -oTextbox.value.length + iEnd);
oRange.select();
} else if (isMoz){
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
}
function textboxReplaceSelect (oTextbox, sText) {
if (isIE) {
var oRange = document.selection.createRange();
oRange.text = sText;
oRange.collapse(true);
oRange.select();
} else if (isMoz) {
var iStart = oTextbox.selectionStart;
oTextbox.value = oTextbox.value.substring(0, iStart) + sText + oTextbox.value.substring(oTextbox.selectionEnd, oTextbox.value.length);
oTextbox.setSelectionRange(iStart + sText.length, iStart + sText.length);
}
oTextbox.focus();
}
function autocompleteMatch (sText, arrValues) {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
return arrValues[i];
}
}
return null;
}
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;
default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false;
}
}
</script>
<script>
var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
</script>
</head>
<body>
<h2>Autocomplete Textbox Example</h2>
<p>Type in a color in lowercase:<br />
<input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p>
</body>
</html>包起来
用户希望能够输入值而不是使用鼠标，并且自动完成文本框会让他们感到非常高兴。
此代码的唯一局限性是区分大小写，尽管可以轻松更改autocompleteMatch()函数以使其不区分大小写（我将让您确切地了解方法！）。 该代码在Netscape Navigator 4.x系列或Opera中不起作用。 在其他浏览器中，其功能未知（但假定无法正常工作）。
From: https://www.sitepoint.com/life-autocomplete-textboxes/
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
