Demo for At.js for @mention

Showing @mention usage of At.js

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/at.js/0.5.0/css/jquery.atwho.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/caret.js/0.2.0/jquery.caret.min.js"></script>
<script src="http://cdn.jsdelivr.net/at.js/0.5.0/js/jquery.atwho.min.js"></script>
<div id='question' class='span12 code_area_style' contenteditable="true">Type '@': </div>

CSS

.code_area_style {
    width: 400px;
    height: 100px;
    border: 1px solid #ccc;
}
.template_helper_commands {
    position: absolute;
    display:none;
}
#formulaDialog {
      width: 280px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      padding: 5px;
      height: auto;
      z-index: 1000;
      background-color: #fff;
}
.var {
      padding: 0 5px;
      background: #E6E6E6;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 1px 1px #CCC;
}

JavaScript

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

            var names = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia", "Alexander", "Sophia", "William", "Ava", "Joshua", "Emily", "Daniel", "Madison", "Jayden", "Abigail", "Noah", "Chloe", "你好", "你你你", "가"];
            var names = $.map(names, function(value, i) {
                return {
                    'id': i,
                    'name': value,
                    'email': value + '@yahoo.com'
                };
            });

            //            var names = [{
            //                    "name": "Jacob",
            //                    "description": "asd asd as dasd asd as dasd asd asd asd"
            //                },
            //                {
            //                    "name": "Isabella",
            //                    "description": "bbbbbbbbbb b bb b b b bbbbbbbbb"
            //                }
            //            ];

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

            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');
        })
});