Selectize Usage Example

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/css/selectize.legacy.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/js/standalone/selectize.js"></script>
<section>
    <h3>HTML5 Multi-Select</h3>
</section>

<section>
    <label class="label">tags</label>
    <textarea id="input-tags" style="word-break: break-word; width: 300px; height: 150px;"></textarea>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,300,600,700);

section {
    padding: 16px;
}

small.caption {
    margin-left: 8px;
}

span, small, h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

label.label {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: .8em;
}

.demo-default {
  backcolor: red;
  word-break: break-word;
  height: 100px;
}

JavaScript

$('#input-tags').selectize({
    persist: false,
    createOnBlur: true,
    splitOn: '/[.;]/',
    valueField: 'name_ru',
		labelField: 'abbr',
		searchField: ['abbr', 'name_ru', 'name_en'],
		sortField: [
						{field: 'abbr', direction: 'asc'}
					],
    options: [
						{abbr: 'EMOM', name_ru: 'Страдать каждую минуту', name_en: 'Every Minute On Hell'},
						{abbr: 'BU', name_ru: 'БУ', name_en: 'Burns on FIre'},
            						{abbr: 'TEST', name_ru: 'БУ2', name_en: 'Burns on FIre2'}

					],
    create: function(data) {
    	console.log(data);
      if (data == "N")
      	return {abbr: 'NEW', name_ru: 'НОВЫЧКА', name_en: 'NEW RECORD'};
      return false;
    }
});

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])?)';
                 
/*
$('#select-to').selectize({
    persist: false,
    maxItems: null,
    valueField: 'email',
    labelField: 'name',
    searchField: ['name', 'email'],
    options: [
        {email: '[email protected]', name: 'Emran Talukder'},
        {email: '[email protected]', name: 'Joshua Tapley'},
        {email: '[email protected]', name: 'Rakhi Gagrani'},
        {email: '[email protected]', name: 'Pratima Bhanu'}
    ],
    render: {
        item: function(item, escape) {
            return '<div>' +
                (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
                (item.email ? ' <small class="email">' + escape(item.email) + '</small>' : '') +
            '</div>';
        },
        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 ? '<small class="caption">' + escape(caption) + '</small>' :...