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 = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia", "Alexander", "Sophia", "William", "Ava", "Joshua", "Emily", "Daniel", "Madison"];
            var names = $.map(names1, function(value, i) {
                return {
                    'id': i,
                    'name': value,
                    'email': value + '@yahoo.com'
                };
            });
            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');
        });