jQuery + Facebook样式状态更新文本框 - 自动填充配置文件的链接

时间:2010-02-19 12:33:42

标签: jquery json facebook autocomplete tokenize

我有一个社交网站,其状态更新文本框,非常像facebook。但是,我还希望用户能够在键入新状态时键入@符号,这会显示朋友个人资料的自动完成选项(再次与facebook相同)。

当用户选择一个时,它应该作为该人员档案的链接包含在状态中。

我见过jquery的许多自动完成插件,包括fcbkComplete插件,但这些插件只允许你从JSON数据中选择项目,而不包括你自己的文本。

例如,我可能想输入: “我今天看着@Paul Hinett的个人资料,并注意到他是@Jack的朋友”

2个个人资料名称应为链接。

希望有人可以帮忙!

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

在状态创建框中引用朋友时在Facebook上创建的令牌被非正式地称为提及标记

看起来你正在寻找一种现有的,强大的解决方案来创造这些东西;如果是这种情况,请查看由您自己维护的Mentionator

另一方面,如果您对如何制作这样的实用程序感兴趣,请继续阅读。

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

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

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

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

  4. 如果您有兴趣了解每个模块的代码可能是什么样的,那么您可以查看Mentionator的源代码,它的结构良好,易于理解,并且有很多评论!**

    *重要的是要注意,正如我推断你暗示的那样,Facebook在创建状态时不会将链接提及到链接中。相反,状态文本被发送到Facebook的服务器,其中包含(可能是内联的)数据,该数据指定状态中每个提及的位置。当状态从服务器传递给用户时,上述位置数据用于创建带有“链接”提及文本的文本版本。

    ** Mentionator的自动完成模块是jQuery UI Autocomplete小部件,其来源未包含在Mentionator中。