title: Jira like autocomplete for textarea
body: <p>I want to implement Jira like auto complete behavior for one of my pet project.
  Check following screenshot.</p>
  
  <p><img src="https://i.stack.imgur.com/8sqkv.png" alt="enter image description here"></p>
  
  <p>I have searched hard for any existing plugin that could able to deliver it but couldn't find anyone.</p>
  
  <p>I have tried following things (<a href="http://jsfiddle.net/budhram/jkkkv1ym/" rel="nofollow noreferrer">JsFiddle Link</a>):</p>
  
  <ul>
  <li>Add <code>textarea</code> and <code>input</code>(hidden initially) field elements. </li>
  <li>Bind a <code>keyPress</code> event on <code>textarea</code></li>
  <li>Capture <code>@</code> key and showing <code>input</code> field enabled with <code>jQuery#autocomplete</code> plugin with list of users </li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='span12'&gt;
      &lt;textarea id='comments' class='span12'&gt;&lt;/textarea&gt;
      &lt;input id='users' class='span12 hide' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$(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
          });
        }
      });
  });
  </code></pre>
  
  <p>My questions are:</p>
  
  <ul>
  <li>How can we trigger <code>@text</code> to show auto-complete list with <code>text</code> as selected?</li>
  <li>After selecting the user, how we can insert that user name in the <code>textarea</code>?</li>
  </ul>