Textarea Autocomplete

Show autocomplete feature on typing @ symbol in textarea

by Budhram Gurung

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/images/ui-bg_flat_75_ffffff_40x100.png"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class='span12'>
    <textarea id='comments' class='span12'></textarea>
    <input id='users' class='span12 hide' />
</div>

JavaScript

$(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
        });
      }
    });
});