65.9K
CodeProject 正在变化。 阅读更多。
Home

自动完成控件

zichun
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (182投票s)

2004年8月18日

5分钟阅读

viewsIcon

2252251

downloadIcon

15874

自动完成控件。

引言

大多数自动完成文本框可能对最终用户产生负面影响。它们没有帮助用户更快地完成工作，反而因为程序员的设计缺陷而惹恼了用户。（诚然，我也犯过这样的设计缺陷。）

我在设计我的第一个自动完成编辑控件时学到了这个教训，该控件可在此处找到[^]。虽然它看起来很直观，但我忘记了考虑这样一个事实：如果最终用户只想输入“ap”，而“ple”却凭空出现怎么办？这意味着最终用户必须找到并按下删除键。

在看到 GMail 如何实现其自动完成功能后，我借鉴了这个想法并实现了自己的自动完成控件版本。

自动完成文本框控件

  • 超时：3000毫秒
  • 分隔符：; 和 ,
  • 选项：（'an apple', 'alligator', 'elephant', 'pear', 'kingbird', 'kingbolt', 'kingcraft', 'kingcup', 'kingdom', 'kingfisher', 'kingpin'）

它是如何工作的？

每当用户按下任何键时都会触发的重要事件是 `onkeydown`。`onkeydown` 事件处理所有正常的字符输入，并负责创建自动完成列表。它还处理“上”、“下”和“回车”等按键。

使用 JavaScript 的 `regexp()` 对象，脚本将遍历包含关键字的数组并逐个匹配它们。之后，将使用 `document.createElement()` 动态创建一个 `DIV`。最后，当用户按下“回车”键时，`DIV` 将被分离，输入框将被更新。

用户还可以使用鼠标选择选项。这是通过三个事件完成的：`onmouseover`、`onmouseout` 和 `onclick`。

如何将其集成到您自己的文本框中？

首先，将 `.js` 文件包含到您的脚本中

<script language="javascript" type="text/javascript" 
         src="actb.js"></script>

接下来，创建一个包含关键字的数组（在 JavaScript 中）

customarray = new Array('apple','pear','mango','pineapple', 
         'orange','banana','durian', 'jackfruit','etc');

使用 JavaScript 将小部件应用于您的文本框

actb(document.getElementById('textbox_id'),customarray);

这样就完成了！

可调性

这个自动完成编辑控件具有一些可自定义的功能

/* ---- Variables ---- */
// Autocomplete Timeout in ms (-1: autocomplete never time out)
this.actb_timeOut = -1;
// Number of elements autocomplete can show (-1: no limit)
this.actb_lim = 4;
// should the auto complete be limited to the beginning of keyword?
this.actb_firstText = false;
// Enable Mouse Support
this.actb_mouse = true;
// Delimiter for multiple autocomplete.
// Set it to empty array for single autocomplete
this.actb_delimiter = new Array(' ',',');
// Show widget only after this number of characters is typed in.
this.actb_startcheck = 1;
/* ---- Variables ---- */


/* --- Styles --- */
this.actb_bgColor = '#888888';
this.actb_textColor = '#FFFFFF';
this.actb_hColor = '#000000';
this.actb_fFamily = 'Verdana';
this.actb_fSize = '11px';
this.actb_hStyle = 'text-decoration:underline;font-weight="bold"';
/* --- Styles --- */ 

this.actb_keywords = new Array();

样式相当直观；调整值以在您自己的网站上获得最佳效果。首先，变量 `actb_timeOut` 控制自动完成列表的超时时间（即，在 x 毫秒后，列表将消失）。默认情况下，它设置为 -1，表示没有超时。

接下来，变量 `actb_lim` 限制列表中显示的元素数量，以防止过度泛滥。如果您不想设置任何限制，请将其设置为 -1。

第三，`actb_firstText` 变量决定了与关键字数组的匹配是否应仅从第一个字符开始，还是匹配可以发生在关键字内的任意位置。例如，如果 `firstText` 设置为 true，那么给定的字符串“ello”将与“hello”匹配。

此外，`actb_mouse` 变量决定了控件是否响应鼠标事件。当用户单击出现的自动完成列表时，鼠标支持将起作用。

`actb_delimiter` 变量允许实现备受期待的多个自动完成功能。设置一个自定义分隔符，甚至多个分隔符，如分号 (;) 或逗号 (,)，引擎将完成由给定分隔符分隔的单词。

最后，`actb_startcheck` 控制在文本框显示控件之前必须键入的字符数。感谢 flyasfly 提出的这个建议。

实现

从 1.3 版本开始，以上所有内容都是公共变量。这对于模仿 Google Suggest 等控件很有用。当您使用 `actb` 函数将控件应用于您的文本框时，它会返回一个对象。

更改自动完成列表

obj = actb(document.getElementById('textbox_id'),customarray);
// ... after some time ...
obj.actb_keyword = new Array('this','is','a','new','set','of','keywords');

多个自动完成文本框

obj = new actb(document.getElementById('textbox_id'),customarray);
obj2 = new actb(document.getElementById('textbox2_id'),customarray2);

多个文本框（不同选项）

obj = new actb(document.getElementById('textbox_id'),customarray);
obj.actb_mouse = false; // no mouse support
obj2 = new actb(document.getElementById('textbox2_id'),customarray2);
obj2.actb_startcheck = 2; // start actb only after 2nd character

待办事项

  • 为列表中的显示描述添加第二个数组（customarrayDesc）（例如 => [an apple: it's an apple]，而不是 [an apple]。由 angelo77 建议）。
  • CPians 提出的许多其他功能，其中一些可能超出了我目前的理解，但我仍然会尽力而为！

已测试浏览器

  • Internet Explorer 6.0.28
  • Mozilla Firefox 1.0.3 版本

最后...

感谢所有支持、修改和提供建议的人！我非常抱歉因为学业等原因导致该项目不活跃。但是，当有人提出新的功能请求时，我仍然会尽力而为！

许可证

从 1.1 版本开始，此控件将在 **知识共享许可协议 [^]** 下发布。

更改日志

  • 1.31: 12/5/2005
    • 修复：由于拼写错误，修复了 `actb_bgColor` 样式中的一个错误。
    • 修复：现在当用户按下 Enter 或 Tab 键时，光标不会移走（Firefox）。
  • 1.3：2005 年 5 月 8 日
    • 新增：`actb_startcheck` 包含启动小部件控件的字符数。感谢 flyasfly 的建议。
    • 更改：所有“可调性”和样式都已更改为公共变量。
    • 修复：修复了一个仅限 IE 的错误，该错误会阻止检索 textarea 的光标位置。现在小部件也可用于 textarea。
  • 1.2：2005 年 4 月 9 日
    • 更改：将 actb 小部件的代码转换为 OOP。
    • 修复：鼠标单击错误，该错误阻止自动完成控件删除自身。
    • 新增：关键字数组（`actb_keyword`）成为公共变量，因此可以从父脚本修改。
  • 1.1：2004 年 12 月 6 日
    • 修复：在与 RegExp 解析之前转义了元字符。
    • 新增：多个分隔符。
    • 新增：Tab 键现在可以像 Enter 键一样完成文本。
    • 更改：现在，只需要一个事件即可使控件工作；其余的将动态附加。
    • 修复：Firefox 中与光标位置相关的错误：最初，“上”和“下”键会更改 Firefox 文本框中的光标位置。这个问题已经得到了纠正。
  • 1.0：2004 年 11 月 23 日
    • 修复：鼠标支持中的一些杂项错误（`actb_removedisp()` 无法正常执行）。
    • 修复：`actb_timeout` 在鼠标支持开启时现在可以正常工作。
    • 新增：当用户将鼠标悬停在每个单独的选项上时，该选项将高亮显示。
    • 新增：多个自动完成！即使您正在编辑以前的“字段”，它也能正常工作。
  • 0.9：2004 年 10 月 6 日
    • 修复：与 `clientHeight` 相关的错误，Apparently Mozilla 不支持。感谢 Cameron Smith 指出。
    • 新增：此控件现在支持带有空格的短语。感谢 Miguel Vieira。
    • 新增：此控件支持鼠标。感谢 Alecacct 和所有人提供的想法。
  • 2004 年 8 月 18 日
    • 创建了基本引擎。
    • 发布了文章！
© . All rights reserved.