JavaScript 的自动完成编辑控件

• 下载源代码 - 1 Kb

引言

这是一个 HTML 控件，它将自动完成功能集成到标准的文本框中。通过添加几行代码，您可以将任何标准的文本框变成一个用户友好且功能强大的控件。

工作原理

每当用户在文本框中输入任何内容时，都会触发 onkeyup 事件，脚本会调用一个函数。然后将文本框中的当前文本与字符串数组进行词法比较。

Javascript 代码

<script>
fruits = new Array('apple','pear','orange',
    'mango','durain','grapes','starfruit');
names = new Array('tom','dick','harry','john','petter','foo','bar');
function autocomplete(n,ac_array){
    if (n.value == "") return 0;
    if (event.keyCode == 8 && n.backspace){
        n.value = n.value.substr(0,n.value.length-1);
        n.backspace = false;
    }

    var r = n.createTextRange();    
    tmp= n.value;
    if (tmp == "")return 0;
    for (z=0;z<ac_array.length;z++){
        tmp2 = ac_array[z];
        count = 0;
        for (i = 0;i<tmp.length;i++){
            if (tmp2.charAt(i) == tmp.charAt(i)){
                count++
            }
        }
        if (count == tmp.length){
            diff = tmp2.length - tmp.length;
            if (diff <= 0) break;
            kap = "";
            for (i=0;i<tmp2.length;i++){
                if (i >= tmp.length) kap += tmp2.charAt(i);
            }
            n.backspace = true;
            r.text += kap;
            r.findText(kap,diff*-2);
            r.select();
            return 0;
        }
    }
    n.backspace = false;
    return 0;
}
</script>

<input name='fruit' type='text' class='textbox' title="Opening" 
    onkeyup="autocomplete(this,fruits)" size="20">
<input name='Name' type='text' class='textbox' title="Opening" 
    backspace='false' onkeyup="autocomplete(this,names)" size="20">

如何使用代码

1. 您必须定义要进行自动完成的字符串数组。

   fruits = new Array('apple','pear','orange','mango','durain',
       'grapes','starfruit');

2. 复制整个自动完成函数，并将其放置在您的代码中的某个位置。
3. 在文本框中添加事件 onkeyup='autocomplete(this,fruits)'。请注意，第二个参数应与您在 1 中定义的数组名称相符。
4. 在文本框中添加属性 backspace='false'。当用户在文本框中按下退格键时，backspace 属性适用。如果没有 boolean 值，会非常烦人；即，当用户按下退格键时，高亮的字符会被删除，但由于自动完成功能，它们会自动被替换为相同的字符。

待办事项

1. 我使用大小为 150 的数组测试了自动完成控件。在我的计算机上（P3 700Mhz），速度相当合理。但是，我相信自动完成函数的字符串匹配算法可以进一步改进。
2. 允许不区分大小写的字符串匹配