15

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

在此处输入图像描述

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

在此处输入图像描述

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

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

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

在此处输入图像描述

在此处输入图像描述

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

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

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

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

与textarea 中的 Twitter 风格的自动完成相关,但这个问题已经有 2 年多了,没有好的答案,希望现在有更好的东西出现。

4

2 回答 2

7

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

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

Meteor 中的客户端数据同步功能使其非常强大且非常灵活。多匹配规则和使用模板的自定义列表渲染都支持:

提到用户,在线用户以绿色呈现:

在此处输入图像描述

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

在此处输入图像描述

请参阅链接查看更多细节。请分叉、拉动和改进!

于 2013-09-22T21:53:36.970 回答
2

在对图书馆的广泛调查中,没有什么太有希望的结果,但我想我会把东西写下来以供参考。

我排除了所有全字段自动完成库,例如 Typeahead 和 jQuery-autocomplete,因为它们并不是我真正想要的。

在这一点上,我相当肯定没有工业级库,除非 GitHub 决定开源他们的代码:)。手指交叉...

于 2013-09-19T23:01:51.180 回答