使用 jQuery 的 Twitter/Facebook @mention 功能答案

【问题标题】：Twitter/Facebook @mention functionality with jQuery使用 jQuery 的 Twitter/Facebook @mention 功能
【发布时间】：2011-06-27 00:15:08
【问题描述】：

我正在尝试在我正在构建的应用程序中实现@提及系统，但遇到了一些困难。

我最初的做法是这样的：

在 textarea/input 被@mentionified 之后创建两个隐藏输入。第一个将保存正在搜索的文本（用于自动完成）。第二个将以@[objectId:text] 的形式保存找到的提及。
这比人们想象的更难付诸实践。当有人按下 @ 符号时，我需要开始将后续文本输入自动完成。我只需要获取 @ 符号和光标之间的文本。如果他们将光标单击到输入的其他部分以编辑某些内容，然后返回编辑 @ 文本怎么办。该脚本需要足够智能，以便仅在用户更新 @ 符号之后的文本时才搜索自动完成。

对实现这一点的最佳方法的想法？有没有插件可以做到这一点？

【问题讨论】：

@Marc：查看 jQueryUI 自动完成的多值演示：jqueryui.com/demos/autocomplete/#multiple。这有帮助吗？
嗯，我以前玩过。我不认为它真的适用于这种情况，但无论如何谢谢。
@Marc：怎么不适用？想象一下使用@ 而不是示例中的,。
因为它不允许我追求的用例。有了它，就无法让用户输入“这是一些文本@andrew 和@marc”。还有其他问题，但这是最大的问题。除非我在这里遗漏了一些东西，否则如果可以改编的话，我很乐意使用它，但我的直觉是，这将是一项比它价值更多的工作。
@Marc：你说得对——这是我不久前给出的答案，可能会让你入门 (stackoverflow.com/q/5972958/497356)。麻烦是回来编辑'@'之后的文本，但它至少可能会让你走上正确的轨道......

【解决方案1】：

我用这个：https://github.com/podio/jquery-mentions-input

这是demo。我觉得对你有帮助。

编辑：

以上插件不再维护。这个插件（Ivan Virabyan）是一个带有一些改进的分支：https://github.com/ivirabyan/jquery-mentions

【讨论】：

它的越野车太糟糕了。移动到下一行后，很多时候标记的用户名都没有正确呈现。
这个hawkee.com/snippet/9391至少做到了它所说的。认为它仅与 jquery 1.8 兼容。没有像stackoverflow.com/questions/15550232/…这样的渲染问题。
@IvanVirabyan 我检查了它。它仅在 chrome 中正常工作。 Css 在 IE(9)、opera(12.4) 和 firefox 25.0 中未按预期显示。火狐只有输入框有问题
@Chandrew，我添加了对此的支持。像这样使用它：$('textarea').mentionsInput('append', {name: 'John', uid: 'user-123'})
@Terminal 我解决了这些问题

【解决方案2】：

我自己也在为此苦苦挣扎，最终编写了一个解决方案，该解决方案使用隐藏字段将 user_id 存储在帖子的完整上下文中：

【讨论】：

【解决方案3】：

我晚了几年，看起来您可能已经避免“重新创建轮子”，但我想我会加两分钱，以防您 (OP) 或其他任何人想要尝试从头开始实现此功能。

“提及”管理实用程序包含 3 个组件：

鉴于这种实用程序的细分，应该清楚的是，原始帖子中的第一步和第二步是可以在实施mention management 和 autocomplete 模块。

用简单的英语进一步研究这 3 个模块的实现会很乏味；查看代码要好得多！幸运的是，我提出了一个解决方案，Mentionator，它很健壮（比这里建议的所有其他解决方案都强）、结构良好、易于理解并且评论丰富。因此，无论您只是想要一个开箱即用的解决方案，还是需要参考资料来创建自己的解决方案，都值得一看。

【讨论】：

【解决方案4】：

我强烈推荐 jquery.mentionsInput 插件。它支持@mention 标记，就像在 facebook 上一样，带有头像和本地或 ajax 数据。

【讨论】：