Twitter / Facebook @mention function using jQuery

Question

I am trying to implement the @mention system in the application that I am creating and am encountering some difficulties.

My initial approach is this:

• Create two hidden inputs after textarea / input is @mentionified. The first will search for text (for autocomplete). The second will contain the mentions found in the form @ [objectId: text].

• This is harder to put into practice than you might think. When someone clicks the @ symbol, I need to start submitting the following text to autocomplete. I only need to get the text between the @ character and the cursor. What if they click on any other part of the input to edit something, and then return to edit the @ text. The script should be smart enough to only search for autocomplete when the user updates the text immediately after the @ symbol.

Thoughts on a better way to implement this? Is there a plugin that already does this?

Answer 1

I use this: https://github.com/podio/jquery-mentions-input

Here is a demon. I find this useful to you.

EDIT:

The above plugin is no longer supported. This plugin ( Ivan Virabyan ) is a fork with some improvements: https://github.com/ivirabyan/jquery-mentions

Answer 2

I myself struggled with this and ended up writing a solution that uses a hidden field to store user_id in the full message context:

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

Answer 3

I'm late for a couple of years, and it seems that you might have avoided "recreating the wheel," but I thought I'd add my two cents in case you (OP) or anyone else wanted to try using this functionality from scratch.

Mention "mention" - the management utility has 3 components:

• Autocomplete module : the component responsible for collecting and displaying a set of elements that can be used to create a mention, taking into account the string.

• Mentioned Tracking Module : a component responsible for tracking mentioned-related data; at a minimum distance, the location, as well as the surface and significant (if any) values ​​of each reference should be monitored in all modifications of the text of the input element to which the utility is attached.

• Mentioning visual differentiation module : component responsible for differentiating the reference text from the rest of the text in the input element to which the utility is attached

Given this breakdown of such a utility, it should be clear that the first and second steps in the original message are those that can be taken when implementing mention control modules and autofill modules, respectively.

Further progress towards the implementation of the three modules in plain English would be tedious; its much better to look at the code! Fortunately, I made the Mentionator solution, which is reliable (more than all the other solutions offered here), well-structured, easy to follow, and commented abundantly. Therefore, it is worth seeing if you just want a ready-made solution or reference material to create your own.

Answer 4

I highly recommend the jquery.mentionsInput plugin. It supports @mention tags, just like on facebook, complete with avatars and local or ajax data.

http://podio.github.com/jquery-mentions-input/