我正在构建一个聊天小部件,允许人们在网络应用程序中相互交谈。因此,大部分聊天只是文字,但我想让人们说
应该在聊天中显示为(例如)
输入@
符号允许Joe
从用户列表中自动完成,也可以呈现为某种 HTML 元素,而不仅仅是文本。
一个很好的例子是在 StackOverflow 上询问或编辑问题时的标签框 - 您可以键入自动完成一个或多个标签的自由文本;我基本上希望标签用特定的符号激活(@
在这种情况下),否则仍然允许自由文本。另一个示例是 StackOverflow 中的评论回复字段,您可以在其中键入@fooUser this is my response to your comment
并fooUser
成为链接。
GitHub 也这样做;#
它为(问题)和(用户)提供不同的自动完成@
,即:
我知道诸如Twitter/Bootstrap typeahead和jQuery UI autocomplete之类的库,但它们似乎可以自动完成整个输入,并且对于执行此类操作不够灵活。这里有两个主要问题:
- 在输入字段上混合呈现文本和任意 DOM 元素的好方法是什么?
- 是否有支持内联自动完成的自动完成库,而不仅仅是整个输入?
我也可以不在文本输入/文本区域中呈现 DOM 元素,但我根本找不到任何执行这种混合自由文本/自动完成的库。
顺便说一句,我在 Meteor 中执行此操作,因此自动完成的数据源将是Meteor 集合。虽然这不应该过多地影响数据的连接方式,但流星感知的答案会更有帮助。
与textarea 中的 Twitter 风格的自动完成相关,但这个问题已经有 2 年多了,没有好的答案,希望现在有更好的东西出现。