Selectize Usage Example

by snavarro81

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/normalize.css">
<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<section>
    <h3>HTML5 Multi-Select</h3>
</section>

<section>
    <label class="label">tags</label>
    <input type="text" id="input-tags" class="demo-default"/>
</section>

<section>
    <label class="label">share with</label>
    <select id="select-to" class="contacts" placeholder="Recipients"/>
</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;
}

JavaScript

$('#input-tags').selectize({
    persist: false,
    createOnBlur: true,
    create: true
});

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>' : '') +
            '</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 +...