Fork me on GitHub.

Demo

Basic Usage

$('#textarea1').textcomplete([
    { // emoji strategy
        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
    }
]);

// You can append strategies to an already existing textcomplete object.
$('#textarea1').textcomplete([
    { // tech companies
        words: ['apple', 'google', 'facebook', 'github'],
        match: /\b(\w{2,})$/,
        search: function (term, callback) {
            callback($.map(this.words, function (word) {
                return word.indexOf(term) === 0 ? word : null;
            }));
        },
        index: 1,
        replace: function (word) {
            return word + ' ';
        },
        placement: 'top'
    }
]);

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

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

Apply to Multiple Textareas

$('.textarea4').textcomplete([
    { // tech companies
        words: ['apple', 'google', 'facebook', 'github'],
        match: /\b(\w{2,})$/,
        search: function (term, callback) {
            callback($.map(this.words, function (word) {
                return word.indexOf(term) === 0 ? word : null;
            }));
        },
        index: 1,
        replace: function (word) {
            return word + ' ';
        }
    }
]);

Customizing header, footer

$('#textarea5').textcomplete([
    { // emoji strategy
        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,
        header: function (data) {
          return '<strong style="text-align: center; display: block;">' + data.length + '</strong>';
        },
        footer: '<strong style="text-align: center; display: block;">Footer</strong>'
    }
]).on('focus', function () {
    var textComplete = $(this).data('textComplete');
    // Cursor has not set yet. And wait 100ms to skip global click event.
    setTimeout(function () {
        // Cursor is ready.
        textComplete.trigger();
    }, 100);
});

Apply to Contenteditables

$('.contenteditable1').textcomplete([
    { // tech companies
        words: ['stunning', 'amazing', 'incredible', 'fantastic', 'fantabulous'],
        match: /\b(\w{2,})$/,
        search: function (term, callback) {
            callback($.map(this.words, function (word) {
                return word.indexOf(term) === 0 ? word : null;
            }));
        },
        index: 1,
        replace: function (word) {
            return word + ' ';
        }
    }
]);

License

MIT