用于Javascript的自动完成编辑控件

分享于 

3分钟阅读

Web开发

  繁體

介绍

这是一个将自动完成集成到标准文本框中的HTML控件。 通过添加几行代码,你可以将任何标准文本框转换成用户友好的控件和相当强大的控件。

使用指导

每当用户在文本框中键入任何内容时,都会激发 onkeyup 事件,脚本会调用函数。 然后将文本框中的当前文本与字符串的array 进行比较。

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 == "") return0;
 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 == "")return0;
 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();
 return0;
 }
 }
 n.backspace = false;
 return0;
}
</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">

如何使用代码

  • 你必须定义你想要自动完成的字符串的array。
fruits = new Array('apple','pear','orange','mango','durain',
 'grapes','starfruit');
  • 复制整个自动完成功能并将它的放在代码中的某个位置。
  • 添加事件 onkeyup='autocomplete(this,fruits)' 注意 2nd 参数应该与你在 1处定义的array 名称相符。
  • 在文本框中添加属性 backspace='false'。 当用户在文本框中按backspace键时,退格属性适用。 如果用户按backspace键就会变得非常烦人,当用户按backspace键时,高亮显示的字符将被删除,但自动完成后,将自动由相同字符替换。

待办事项

  • 我已经使用大小为 150的array 测试了自动完成控件。 我的电脑( P3 700 Mhz ) 上的速度非常合理。 但是,我确信函数算法的自动完成字符串匹配可以进一步改进。
  • 允许区分大小写的字符串匹配