Textcomplete

// Shared strategy for all demos.
window.emojiStrategy = {
  id: 'emoji',
  match: /(^|\s):([a-z0-9+\-\_]*)$/,
  search: function (term, callback) {
    callback(Object.keys(emojis).filter(function (name) {
      return name.startsWith(term);
    }));
  },
  template: function (name) {
    return '<img src="' + emojis[name] + '"></img> ' + name;
  },
  replace: function (name) {
    return '$1:' + name + ': ';
  }
};

var editor = new Textarea(document.getElementById('textarea1'));

var textcomplete = new Textcomplete(editor);
textcomplete.register([emojiStrategy]);

var editor = new Textarea(document.getElementById('textarea2'));
var textcomplete = new Textcomplete(editor, {
  dropdown: {
    maxCount: 5,
    placement: 'top'
  }
});
textcomplete.register([emojiStrategy]);

var editor = new Textarea(document.getElementById('textarea3'));
var textcomplete = new Textcomplete(editor);
textcomplete.register([emojiStrategy]);

textcomplete.on('rendered', function () {
  if (textcomplete.dropdown.items.length === 1) {
    // Automatically select the only item.
    textcomplete.dropdown.select(textcomplete.dropdown.items[0]);
  } else if (textcomplete.dropdown.items.length > 1) {
    // Activate the first item by default.
    textcomplete.dropdown.items[0].activate();
  }
});