jQuery + Facebook style status update textbox - Autocomplete links to profiles

I have a social networking website with a status update textbox, much like facebook. However I would also like the user to be able to type the @ symbol while typing a new status which brings up an autocomplete option of friends profiles (again the same as facebook does).

When the user selects one it should be included in the status as a link to that persons profile.

I have seen the many autocomplete plugins for jquery, including the fcbkComplete plugin but these will only allow you to choose items from the JSON data, and not include your own text also.

For example I may want to type: "I was looking at @Paul Hinett's profile today and noticed he is friends with @Jack"

The 2 profile names should be lin开发者_运维技巧ks.

Hope somebody can help!

This plugin appears to be a partial solution: https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

Those tokens created on Facebook when one references a friend in the status creation box are informally known as mentions or tags.

It looks as if you're searching for an existing, robust solution to create these things; if that is the case, check out Mentionator, which is maintained by yours truly.

If, on the other hand, you're interested in how such a utility is made,read on.

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*

If you're interested in learning what each of these modules may look like code-wise, you can take a look at the source code of Mentionator, which is well-structured, easy to follow, and copiously commented!**

*It is important to note that Facebook's implementation of such a facility does not turn mentions in to links while the status is being created, as I inferred you implied. Instead, the text of the status is sent to a Facebook's servers with (possibly in-line) data which specifies the location of each mention in the status. When the status is to be delivered from the servers to a user, the aforementioned locational data is used to create a version of the text with "linkified" mention text.

**The autocomplete module of Mentionator is the jQuery UI Autocomplete widget, the source of which is not included in Mentionator.