Jira like autocomplete for textarea

Question

I want to implement Jira like auto complete behavior for one of my pet project. Check following screenshot.

I have searched hard for any existing plugin that could able to deliver it but couldn't find anyone.

I have tried following things (JsFiddle Link):

• Add textarea and input(hidden initially) field elements.
• Bind a keyPress event on textarea
• Capture @ key and showing input field enabled with jQuery#autocomplete plugin with list of users

HTML:

<div class='span12'>
    <textarea id='comments' class='span12'></textarea>
    <input id='users' class='span12 hide' />
</div>

Script:

$(function() {
    var users = [
        "Ram",
        "Ramesh",
        "Rakesh",
        "Rahul",
        "Abhi",
        "Karan"
    ];
    $('#comments').on('keypress', function(e){
      if(e.keyCode === 64) {
        $( "#users" ).removeClass('hide');
        $( "#users" ).autocomplete({
          source: users
        });
      }
    });
});

My questions are:

• How can we trigger @text to show auto-complete list with text as selected?
• After selecting the user, how we can insert that user name in the textarea?

Answer 1

Following are the three JavaScript plugins I found which serves the purpose I am looking for:

• jQuery-textcomplete.js
• At.js
• triggeredAutocomplete.js