Fork me on GitHub.

Demo

Basic Usage

$('#textarea1').textcomplete({
    // emoji strategy
    emoji: {
        match: /\B:([\-+\w]*)$/,
        search: function (term, callback) {
            callback($.map(emojies, function (emoji) {
                return emoji.indexOf(term) === 0 ? emoji : null;
            }));
        },
        template: function (value) {
            return '<img src="media/images/emoji/' + value + '.png"></img>' + value;
        },
        replace: function (value) {
            return ':' + value + ': ';
        },
        index: 1,
        maxCount: 5
    }
});

Insert Cursor After Autocomplete

var elements = ['span', 'div', 'h1', 'h2', 'h3'];
$('#textarea2').textcomplete({
    html: {
        match: /<(\w*)$/,
        search: function (term, callback) {
            callback($.map(elements, function (element) {
                return element.indexOf(term) === 0 ? element : null;
            }));
        },
        index: 1,
        replace: function (element) {
            return ['<' + element + '>', '</' + element + '>'];
        }
    }
});

Use with jQuery.overlay

var mentions = ['yuku_t'];
$('#textarea3').textcomplete({
    html: {
        match: /\B@(\w*)$/,
        search: function (term, callback) {
            callback($.map(mentions, function (mention) {
                return mention.indexOf(term) === 0 ? mention : null;
            }));
        },
        index: 1,
        replace: function (mention) {
            return '@' + mention + ' ';
        }
    }
}).overlay([
    {
        match: /\B@\w+/g,
        css: {
            'background-color': '#d8dfea'
        }
    }
]);