使用jQuery的Twitter / Facebook @mention功能

时间:2011-06-27 00:15:08

标签: jquery twitter hashtag

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

我最初的做法是:

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

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

  3. 关于实施此方法的最佳方法的想法?那里有插件吗?

4 个答案:

答案 0 :(得分:10)

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

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

编辑:

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

答案 1 :(得分:4)

我自己正在努力解决这个问题,最后编写了一个使用隐藏字段将user_id存储在帖子的完整上下文中的解决方案:

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

答案 2 :(得分:2)

我已经迟了几年了,看起来你可能已经避免“重新创造轮子”,但我认为如果你(OP)或其他任何人想要的话我会增加两美分尝试从头开始实现这一功能。

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

  1. 自动填充模块:在给定字符串的情况下,负责获取和显示可用于创建提及的项目集的组件。

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

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

  4. 鉴于此类实用程序的这种细分,应该清楚原始帖子中的第一个第二步是可以在实现<< em>分别提及管理和自动完成模块。

    用简单的英语进一步深入研究3个模块的实施将是乏味的;看代码要好得多!幸运的是,我已经提出了一个强大的解决方案Mentionator(比这里提出的所有其他解决方案更多),结构良好,易于理解和大量评论。因此,值得一看的是,您是否只想要一个开箱即用的解决方案或参考材料来创建自己的解决方案。

答案 3 :(得分:0)

我强烈推荐使用jquery.mentionsInput插件。它支持@mention标记,就像在facebook上一样,包含头像以及本地或ajax数据。

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