Facebook Status Update-Like Autocomplete/Tagging Feature with jQuery

I'd like to create a text input like the Facebook status update Publisher. Basically, an input that can activate an tagging/autocomplete 开发者_StackOverflow中文版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.

It seems like the most viable option to go about this (using jQuery) is a contenteditable div. However, I have little idea what to do with the jQuery from there. Can anyone help get me started? Thanks.

---

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/

---

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

---

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. 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:

1. Autocomplete module: The component responsible for procuring and displaying the set of items that can be used to create a mention, given a string.

2. 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.

3. 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 :) .