I want to implement Jira like auto plete 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#autoplete plugin with list of users

HTML:

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

Script:

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

My questions are:

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

I want to implement Jira like auto plete 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#autoplete plugin with list of users

HTML:

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

Script:

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

My questions are:

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

• javascript
• jquery
• html
• user-interface
• autoplete

2 Answers 2

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

• jQuery-textplete.js
• At.js
• triggeredAutoplete.js

A great implementation with a UI just like this is jquery.mentionsInput.

It works with arrays of objects to auto-suggest as well as content fetched via AJAX requests. It requires jQuery and underscore.js and supports MSIE 8 and better.

Of particular note is it that exports links to usernames using a simple Markdown style markup, storing internal ID's alongside the @username mention. This means you can easily parse the text to do things like trigger events based on who is mentioned and means you can display real, human readable names in text but still correlate them with unique user ID's internally.

Any Markdown library can convert it to plain text if you need to just store or display the result as plain text.