用Javascript制作一个可自动填写的文本框(全文完)
版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及本声明
Ø 对autocomplete()的补充
对autocomplete() 方法补充一下，我们先到可自动完成的文本框标记中看一下（译者注：<input type=text>），autocomplete()方法将给出三个参数：作用于的文本框的对象oTextbox对象，event（事件）对象。调用方法如下：
<input type=”text” onkeyup=”return autocomplete(this, event, arrValues)” />
考虑到在文本框中触发onkeypress事件（译者更正：应该使用onkeyup事件，以保证字符已被输入）的第一个键的键码：
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
...
}
}
有许多按键需要被屏蔽，如光标键，只需要在下面指定的case语句中返回true
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: // á键
case 40: // â键
case 37: // ß键
case 39: // à键
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: // 退格键
case 46: // Delete键
return true;
break;
...
}
}
默认的case语句：当用户键入一个字符。
在这个case语句中需要完成以下几个步骤：
1. 用键入的字符替换已选择的文本。（译者注：这一步似乎并没有必要）
2. 键入文本时试着得到一个匹配的文本。
3. 如果找到，为文本框建议一个应该输入的文本，并选择这些用户无需键入的匹配文本。
这个步骤最重要的是确定用户键入的字符（由event对象的keyCode属性(IE)或charCode属性(Mozilla)得到键码，并使用String.fromCharCode () 方法将键码转为字符，用这字符替换当前选择的文本，然后我们需要得到文本框中文本的长度。
function autocomplete(oTextbox, oEvent, arrValues) {
switch (oEvent.keyCode) {
case 38: // á键
case 40: // â键
case 37: // ß键
case 39: // à键
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: // 退格键
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: // á键
case 40: // â键
case 37: // ß键
case 39: // à键
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: // 退格键
case 46: // Delete键
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 () 方法的输入参数，以选择那些已被匹配的文本(sMatch)。
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，否则，输入的字符会出现两次。
=====================================================================
Ø 示例代码（为IE浏览器）：
说明：该示例码在NetScape或Oprea浏览器中可能不会很好的执行，另外，如果你了非键盘输入（鼠标复制／粘贴），也不会执行。
Autocomplete Textbox ExampleType in a color in lowercase:输入一个以小写字母开头的颜色(英文单词)(一) (二) （三）