6

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

我最初的做法是这样的:

  1. 在 @提及的 textarea/input 之后创建两个隐藏的输入。第一个将保存正在搜索的文本(用于自动完成)。第二个将以@[objectId:text] 的形式保存找到的提及。

  2. 这比人们想象的更难付诸实践。当有人按下 @ 符号时,我需要开始将后续文本输入自动完成。我只需要获取 @ 符号和光标之间的文本。如果他们将光标单击到输入的其他部分以编辑某些内容,然后返回编辑 @ 文本怎么办。该脚本需要足够智能,以便仅在用户更新 @ 符号后的文本时才搜索自动完成。

关于实现这一点的最佳方法的想法?有没有一个插件已经这样做了?

4

4 回答 4

11

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

这是一个演示。我认为这对你有帮助。

编辑:

上述插件不再维护。这个插件(由Ivan Virabyan 编写)是一个带有一些改进的分支:https ://github.com/ivirabyan/jquery-mentions

于 2012-05-18T12:08:25.000 回答
5

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

http://www.hawkee.com/snippet/9391/

于 2012-03-23T14:06:00.460 回答
2

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

“提及”管理实用程序具有 3 个组件:

  1. 自动完成模块:负责获取和显示可用于创建提及的项目集的组件,给定一个字符串。

  2. 提及跟踪模块:负责跟踪提及相关数据的组件;至少应在对附加实用程序的输入元素文本的所有修改过程中跟踪每次提及的位置以及表面和实质(如果存在)值。

  3. 提及视觉区分模块:负责将提及文本与附加实用程序的输入元素中的其余文本区分开来的组件

鉴于这种实用程序的这种细分,应该清楚的是,原始帖子中的第一步第二步分别是可以在提及管理自动完成模块的实现中采取的步骤。

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

于 2016-07-02T19:09:48.513 回答
0

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

http://podio.github.com/jquery-mentions-input/

于 2012-10-16T19:31:22.750 回答