Facebook Status Update-Like Autocomplete/Tagging Feature with jQuery

Question

I'd like to create a text input like the 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.

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.

Answer 1

Hi Chris,

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