Twitter/Facebook @mention functionality with jQuery

Question

I'm trying to implement an @mention system in an application I'm building and am running into some difficulties.

My initial approach is this:

1. Create two hidden inputs after the textarea/input being @mentionified. The first will hold the text being searched for (for the autocomplete). The second will hold found mentions in the form @[objectId:text].

2. This is harder to put into practice than one would think. When someone presses the @ symbol I need to start feeding the subsequent text into the autocomplete. I need to only get the text between the @ symbol and the cursor. What if they click the cursor to some other part of the input to edit something, then come back to edit the @ text. The script needs to be smart enough to only search the autocomplete when the user is updating the text right after the @ symbol.

Thoughts on the best way to implement this? Is there a plugin out there that already does this?

Answer 1

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

Here is a demo. I think it's helpful for you.

EDIT:

The above plugin isn't maintained anymore. This plugin (by Ivan Virabyan) is a fork with some improvements: https://github.com/ivirabyan/jquery-mentions

Answer 2

I was struggling with this myself and ended up writing a solution that uses a hidden field to store the user_id within the full context of the post:

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