JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css">
<p class="value">Current Value: <span class="current-value"></span></p>
<select class="recipients" placeholder="Recipients"></select>

JavaScript

var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
  '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';

// show current input values
$('.recipients').on('change', function(e) {
  var $container = $('.value');
  var $value = $('.current-value').appendTo($container);
  var $input = $(this);
  $value.text($(this).val().join(';'));
});

$('.recipients').selectize({
  plugins: ['remove_button'],
  persist: false,
  maxItems: null,
  valueField: 'email',
  labelField: 'name',
  searchField: ['name', 'email'],
  options: [{
    email: '[email protected]',
    name: 'Jason Ball '
  }, {
    email: '[email protected]',
    name: 'Joshua Pugsley '
  }, {
    email: '[email protected]',
    name: 'Codye Watson '
  }],
  render: {
    item: function(item, escape) {
      return '<div>' +
        (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
        (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
        '</div>';
      console.log(item.name)
    },
    option: function(item, escape) {
      var label = item.name || item.email;
      var caption = item.name ? item.email : null;
      return '<div>' +
        '<span class="label">' + escape(label) + '</span>' +
        (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
        '</div>';
    }
  },
  createFilter: function(input) {
    var match, regex;

    // [email protected]
    regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
    match = input.match(regex);
    if (match) return !this.options.hasOwnProperty(match[0]);

    // name <[email protected]>
    regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
    match = input.match(regex);
    if (match) return !this.options.hasOwnProperty(match[2]);

    return false;
  },
  create: function(input) {
    if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
      return {
       ...