简体繁体 English

Facebook状态更新-具有jQuery的自动填充/标记功能

[英]Facebook Status Update-Like Autocomplete/Tagging Feature with jQuery

原文 2010-07-29 08:36:56 7 3 jquery/ facebook/ autocomplete/ tagging/ contenteditable

I'd like to create a text input like the Facebook status update Publisher. 我想创建一个文本输入，例如Facebook status update Publisher。 Basically, an input that can activate an tagging/autocomplete feature with a certain key (ex: @), creating tags that act as single characters in the text input (can be deleted with a single backspace), and yet still accept regular text input. 基本上，输入可以使用特定键（例如：@）激活标记/自动完成功能，创建在文本输入中充当单个字符的标记（可以使用单个退格键删除），但仍接受常规文本输入。 Different from Facebook, I'd like to only accept one such "tag" and only accept it at the beginning of the input. 与Facebook不同，我只想接受一个这样的“标签”，并且只在输入开始时接受它。

It seems like the most viable option to go about this (using jQuery) is a contenteditable div. 似乎最可行的选择（使用jQuery）是一个contenteditable div。 However, I have little idea what to do with the jQuery from there. 但是，我不知道该怎么处理jQuery。 Can anyone help get me started? 任何人都可以帮我开始吗？ Thanks. 谢谢。

3 个解决方案

The tokenizing autocomplete plugin in the first answer does not accomplish exactly what the question is asking. 第一个答案中的标记化自动完成插件无法完全完成所要问的问题。 That plugin will only allow you to build a list of search results with no regular text in between. 该插件将仅允许您构建搜索结果列表，且中间没有常规文本。

I ended up writing my own solution to this which can be found here: 我最终编写了自己的解决方案，可以在这里找到：

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

a friend of mine ran into that "problem" last week. 我的一个朋友上周遇到了这个“问题”。 He ended up using this plugin which is pretty self-explanatory: 他最终使用了这个插件，这很容易解释：

http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

Hopefully, by now (6+ years later) you're managed to find a suitable existing solution for your needs, or you've managed to roll out your own. 希望到现在（6年后），您已经设法找到适合您需要的现有解决方案，或者您已经成功推出了自己的解决方案。 If you haven't, I figured the following would be of assistance to you, and those who've stumbled upon here looking either such resolution. 如果您没有，我认为以下内容将对您有所帮助，而那些偶然发现这里的人则可以找到这样的解决方案。

A "mention"-management utility has 3 components: “提及”管理实用程序包含3个组件：

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 提及视觉区分模块 ：负责将提及的文本与实用程序所附加的输入元素中其余文本区分开的组件

Hopefully that breakdown of such a utility will give you an idea of how to roll out your own implementation of it. 希望此类实用程序的分解能够使您对如何推广自己的实现有所了解。

If you'd rather use an existing robust implementation, have a look at Mentionator , which is maintained by this guy right here :) . 如果您想使用现有的可靠实现，请查看Mentionator ，此人在这里维护它:)。