JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="http://yuku-t.com/jquery-overlay/jquery.overlay.js"></script>
<script src="http://yuku-t.com/jquery-overlay/media/javascripts/shCore.js"></script>
<link rel="stylesheet" href="http://yuku-t.com/jquery-overlay/media/stylesheets/shCoreDefault.css">
<script src="http://yuku-t.com/jquery-overlay/media/javascripts/shBrushJScript.js"></script>
<script src="http://yuku-t.com/jquery-overlay/media/javascripts/main.js"></script>
<script src="http://yuku-t.com/jquery-textcomplete/media/javascripts/jquery.textcomplete.js"></script>
<link rel="stylesheet" href="http://yuku-t.com/jquery-textcomplete/media/stylesheets/main.css">
<link rel="stylesheet" href="http://yuku-t.com/jquery-overlay/media/stylesheets/font-awesome.css">
<link rel="stylesheet" href="http://yuku-t.com/jquery-overlay/media/stylesheets/bootstrap.css">
<textarea class="form-control" id="textarea3" rows="4">testing @user_name,
</textarea>

CSS

textarea {
    font-weight: 200;
    width:300px;
    overflow: hidden;
}

JavaScript

$('#textarea3').textcomplete(
    [{
        mentions: ['Nilay mehta', 'Nilay Soni','Ranganadh','Simhachalam','Ajay'],
        match: /\B@([\w\s]*)$/,
        search: function (term, callback) {
            term = term.toLowerCase();
            callback($.map(this.mentions, function (mention) {
                return mention.toLowerCase().indexOf(term) >= 0 ? mention : null;
            }));
        },
        index: 1,
        replace: function (mention) {
            return '@' + mention + ''+String.fromCharCode(1);
        }
    },{
        mentions: ['google chrome', 'firefox','safari','opera','internet explorer'],
        match: /\B#([\w\s]*)$/,
        search: function (term, callback) {
            callback($.map(this.mentions, function (mention) {
                return mention.indexOf(term) >= 0 ? mention : null;
            }));
        },
        index: 1,
        replace: function (mention) {
            return '#' + mention + ''+String.fromCharCode(1);
        }
    }],{
        appendTo: 'body'
    }).overlay([{
        match: /\B[@#][\s|\w]+/g,
        css: {
            'background-color': '#d8dfea'
        }
    }]
);