jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://acmsohail.com/jsfiddle/jquery.atwho.css">
<script src="http://acmsohail.com/jsfiddle/jquery-2.2.0.min.js"></script>
<script src="https://acmsohail.com/jsfiddle/jquery.caret.js"></script>
<script src="https://acmsohail.com/jsfiddle/jquery.atwho.js"></script>
<div id="main">
  <textarea id="inputor" class="inputor"></textarea>
</div>

CSS

.inputor {
  height: 160px;
  width: 90%;
  border: 1px solid #dadada;
  border-radius: 4px;
  padding: 5px 8px;
  outline: 0 none;
  margin: 10px 0;
  background: white;
  font-size: inherit;
  overflow-y: scroll;
}

.inputor:focus {
  border: 1px solid rgb(6, 150, 247);
}

JavaScript

$(function() {
  $.fn.atwho.debug = true

  var names1 = [{
      "name": "Jacob",
      "description": "description one description one description one"
    },
    {
      "name": "Isabella",
      "description": "description two description two description two"
    }
  ];

  var names = $.map(names1, function(value, description, i) {
    return {
      'id': i,
      'name': value,
      'email': description
    };
  });

  var at_config = {
    at: "@",
    data: names,
    headerTpl: '<div class="atwho-header">Service List <small>↑&nbsp;↓&nbsp;</small></div>',
    insertTpl: '${email}',
    displayTpl: "<li>${name}</li>",
    limit: 200
  }
  $inputor = $('#inputor').atwho(at_config);
  $inputor.caret('pos', 47);
  $inputor.focus().atwho('run');
});