JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js"></script>
<p>Enter a few of the valid usernames:<p>

<textarea id="multi-users"></textarea>

CSS

body{
    padding:20px;
}
#multi-users{
    width:300px;
    height:100px;
}

JavaScript

var users = ["LindsayM",
             "robdyrdek",
             "mjgabel",
             "YoungReckless",
             "RickyBahner",
             "HackMurphy",
             "charlie",
             "andream",
             "MissCJ",
             "Pavilion123",
             "jenna",
             "Conlin",
             "streetleague",
             "MoneyMo",
             "NikRichie",
             "Loudmouthfoods"];

$('#multi-users').typeahead({
    name: 'users',
    matcher: function(item){
        item = item.toLowerCase();
        var usernames = (this.query.toLowerCase()).match(/@\w+/g);
        if(!!usernames){
            for(var i=0; i<usernames.length; i++){
                var username = (usernames[i].substring(1)).toLowerCase();
                var matched = item.indexOf(username);
                                
                var re = new RegExp("@"+item,"g");
                var used = ((this.query.toLowerCase()).match(re));
                                
                if(item.indexOf(username)!=-1 && used==null){
                    return true;
                }
            }
        }
    },
    updater: function(item){
        var data = this.query;
        var caratPos = this.$element[0].selectionStart;
        
        for(i=caratPos; i>=0; i--){
            if(data[i]=="@"){
                break;                
            }                
        }
        
        var replace = data.substring(i, caratPos);
        data = data.replace(replace, '@'+item);
        
        return data;
    }
});