JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<p>Type in some text below, and include any of the usernames prepended with
  an @ symbol (like Twitter):
  <p> <pre><code>["LindsayM", "robdyrdek", "mjgabel", "YoungReckless", "RickyBahner", "HackMurphy", "charlie", "andream", "MissCJ", "Pavilion123", "jenna", "Conlin", "streetleague", "MoneyMo", "NikRichie", "Loudmouthfoods"]</code></pre>

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

CSS

body {
  padding:20px;
  background: #EEE;
  color: #252525;
  text-shadow: 0 1px 0 white;
}
#multi-users {
  width:100%;
  height:100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  text-shadow:none;
}
textarea {
  padding: 8px 15px;
  background: #fefefe;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #999;
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: auto;
  overflow-y: hidden;
  color:#444;
}
pre {
  text-shadow:0 1px 0 #fff;
}

JavaScript

$.fn.typeahead.Constructor.prototype.render = function (items) {
  var that = this;

  items = $(items).map(function (i, item) {
    i = $(that.options.item).attr('data-value', item)
    i.find('a').html(that.highlighter(item))
    return i[0]
  });

  items.first().addClass('active');
  this.$menu.html(items);
  console.log('My shit');
  return this;
};

(function ($) {
  $.fn.extend({
    mention: function (options) {
      this.opts = {
        users: [],
        delimiter: '@',
        sensitive: true,
        typeaheadOpts: {}
      };

      var settings = $.extend({}, this.opts, options),
        _checkDependencies = function () {
          if (typeof $ == 'undefined') {
            throw new Error("jQuery is Required");
          } else {
            if (typeof $.fn.typeahead == 'undefined') {
              throw new Error("Typeahead is Required");
            }
          }
          return true;
        },
        _extractCurrentQuery = function (query, caratPos) {
          for (i = caratPos; i >= 0; i--) {
            if (query[i] == settings.delimiter) {
              break;
            }
          }
          return query.substring(i, caratPos);
        },
        _matcher = function (item) {
          item = item.toLowerCase();
          var usernames = (this.query.toLowerCase()).match(new RegExp(settings.delimiter + '\\w+', "g")),
            i;
          if ( !! usernames) {
            for (i = 0; i < usernames.length; i++) {
              var username = (usernames[i].substring(1)).toLowerCase(),
                matched = item.indexOf(username),
                re = new RegExp(settings.delimiter + item, "g"),
                used = ((this.query.toLowerCase()).match(re));

              if (item.indexOf(username) != -1 && used === null) {
                return true;
              }
            }
          }
        },
        _updater = function (item) {
          var data = this.query,
            caratPos = this.$element[0].selectionStart;

   ...