javascript - 带有特殊符号自动完成功能的自由文本输入

Question

我正在构建一个聊天小部件，让人们可以在网络应用程序中相互交谈。因此，大部分聊天只是文本，但我想让人们说

在聊天中应该显示为(例如)

输入 @ 符号可以让 Joe 从用户列表中自动完成，并呈现为某种 HTML 元素，而不仅仅是文本。

一个很好的例子是在 StackOverflow 上提问或编辑问题时的标签框——您可以键入自动完成一个或多个标签的自由文本；我基本上希望标签使用特定符号(在本例中为 @)激活，否则仍然允许自由文本。另一个示例是 StackOverflow 中的评论回复字段，您可以在其中键入 @fooUser this is my response to your comment 并且 fooUser 成为一个链接。

GitHub 也这样做；它为 #(问题)和 @(用户)提供不同的自动完成，即:

我知道诸如 Twitter/Bootstrap typeahead 之类的库和 jQuery UI autocomplete ，但它们似乎可以自动完成整个输入，并且不够灵活，无法执行此类操作。这里有两个主要问题:

• 在输入字段上混合呈现文本和任意 DOM 元素的好方法是什么？
• 是否有支持内联自动完成的自动完成库，而不仅仅是整个输入？

我也可以不在文本输入/文本区域中呈现 DOM 元素，但我根本找不到任何执行这种类型的混合自由文本/自动完成的库。

顺便说一句，我在 Meteor 中执行此操作，因此自动完成的数据源将是 Meteor collection .虽然这不应该过多地影响数据的连接方式，但 Meteor 感知答案会更有帮助。

与相关Twitter-style autocomplete in textarea 但这个问题已有 2 年多的历史了，没有好的答案，希望现在已经出现了更好的东西。

Answer 1

为此目的创建一个 Meteor 包是值得的:

https://github.com/mizzao/meteor-autocomplete

Meteor 中的客户端数据同步使它既强大又灵活。支持多种匹配规则和使用模板的自定义列表呈现:

提及用户，在线用户以绿色呈现:

提及其他内容，以及显示的一些元数据

有关详细信息，请参阅链接。请 fork 、拉取和改进!