我正在尝试在我正在构建的应用程序中实现 @mention 系统，但遇到了一些困难。
我最初的方法是这样的：
-
在文本区域/输入被@提及后创建两个隐藏输入。第一个将保存正在搜索的文本（用于自动完成）。第二个将以 @[objectId:text] 的形式保存找到的提及。
-
这比人们想象的更难付诸实践。当有人按下@符号时，我需要开始将后续文本输入自动完成功能中。我只需要获取@符号和光标之间的文本。如果他们将光标单击到输入的其他部分来编辑某些内容，然后返回编辑 @ 文本，该怎么办？该脚本需要足够智能，以便仅在用户更新 @ 符号后面的文本时搜索自动完成。
关于实现这一点的最佳方法的想法？有没有一个插件已经可以做到这一点？
I'm trying to implement an @mention system in an application I'm building and am running into some difficulties.
My initial approach is this:
-
Create two hidden inputs after the textarea/input being @mentionified. The first will hold the text being searched for (for the autocomplete). The second will hold found mentions in the form @[objectId:text].
-
This is harder to put into practice than one would think. When someone presses the @ symbol I need to start feeding the subsequent text into the autocomplete. I need to only get the text between the @ symbol and the cursor. What if they click the cursor to some other part of the input to edit something, then come back to edit the @ text. The script needs to be smart enough to only search the autocomplete when the user is updating the text right after the @ symbol.
Thoughts on the best way to implement this? Is there a plugin out there that already does this?
发布评论
评论（4）
我用这个： https://github.com/podio/jquery-mentions-input
这是一个演示。我认为这对你有帮助。
编辑：
上述插件不再维护。这个插件（由 Ivan Virabyan 开发）是一个带有一些改进的分支：https://github.com/ivirabyan/jquery-mentions
I use this: https://github.com/podio/jquery-mentions-input
Here is a demo. I think it's helpful for you.
EDIT:
The above plugin isn't maintained anymore. This plugin (by Ivan Virabyan) is a fork with some improvements: https://github.com/ivirabyan/jquery-mentions
我自己也在努力解决这个问题，最终编写了一个解决方案，该解决方案使用隐藏字段在帖子的完整上下文中存储 user_id：
http://www.hawkee.com/snippet/9391/
I was struggling with this myself and ended up writing a solution that uses a hidden field to store the user_id within the full context of the post:
http://www.hawkee.com/snippet/9391/
我晚了几年，看起来你可能已经避免了“重新创造轮子”，但我想我会加上我的两分钱，以防你（OP）或其他任何人想要尝试他们的手从头开始实现此功能。
“提及”管理实用程序有 3 个组件：
自动完成模块：负责获取和显示可用于在给定字符串的情况下创建提及的项目集的组件。
提及跟踪模块：负责跟踪提及相关数据的组件；至少应在对附加实用程序的输入元素的文本的所有修改中跟踪每个提及的位置以及表面和实质性（如果存在）值。
提及视觉区分模块：负责将提及文本与附加实用程序的输入元素中的其余文本区分开来的组件
鉴于此类实用程序的细分，应该清楚第一个和第二原始帖子中的步骤分别是在实现提及管理和自动完成模块时可以采取的步骤。
用简单的英语来说，进一步深入研究这 3 个模块的实现将是乏味的；还是看代码比较好！幸运的是，我已经制定了一个解决方案，Mentionator，它非常强大（比建议的所有其他解决方案更强大）此处），结构良好，易于理解，并且有大量评论。因此，值得一看的是您是否只是想要一个开箱即用的解决方案，或者参考材料来创建您自己的解决方案。
I'm a couple of years late, and it looks as thought you may have avoided "recreating the wheel", but I thought I'd add my two cents in case you (OP), or anyone else, wants to try their hand implementing this functionality from scratch.
A "mention"-management utility has 3 components:
Autocomplete module: The component responsible for procuring and displaying the set of items that can be used to create a mention, given a string.
Mention tracking module: The component responsible for keeping track of mention-associated data; at the bare minimum the location, as well as the superficial and substantive (if existent) values of each mention should be tracked throughout all modifications of the text of the input element to which the utility is affixed.
Mention visual differentiation module: The component responsible for differentiating mention text from the rest of the text in the input element to which the utility is affixed
Given this breakdown of such a utility, it should become clear that the first and second steps in original post are ones that can be taken in the implementation of the mention management and autocomplete modules, respectively.
Delving further in to the implementation of the 3 modules, in plain English, would be tedious; its much better to look at code! Fortunately, I've made a solution, Mentionator, that is robust (more so than all the other solutions suggested here), well-structured, easy to follow, and copiously commented. So its worth a look at whether you just want an out-of-the box solution, or reference material to create your own.
我强烈推荐 jquery.mentionsInput 插件。它支持 @mention 标记，就像在 facebook 上一样，包含头像和本地或 ajax 数据。
http://podio.github.com/jquery-mentions-input/
I highly recommend the jquery.mentionsInput plugin. It supports @mention tagging just like on facebook, complete with avatars and either local or ajax data.
http://podio.github.com/jquery-mentions-input/