Selectize Usage Example

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/normalize.css">
<script src="https://smartengage.com/assets/js/main/selectize.js"></script>
<link rel="stylesheet" href="https://smartengage.com/assets/css/main/selectize.css">
<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>

<section>
					<select id="select-state">
						<option value="">Select a state...</option>
						<option value="AL">Alabama</option>
						<option value="AK">Alaska</option>
						<option value="AZ">Arizona</option>
						<option value="AR">Arkansas</option>
						<option value="CA" selected>California</option>
						<option value="CO">Colorado</option>
						<option value="CT">Connecticut</option>
						<option value="DE">Delaware</option>
						<option value="DC">District of Columbia</option>
						<option value="FL">Florida</option>
						<option value="GA">Georgia</option>
						<option value="HI">Hawaii</option>
						<option value="ID">Idaho</option>
						<option value="IL">Illinois</option>
						<option value="IN">Indiana</option>
						<option value="IA">Iowa</option>
						<option value="KS">Kansas</option>
						<option value="KY">Kentucky</option>
						<option value="LA">Louisiana</option>
						<option value="ME">Maine</option>
						<option value="MD">Maryland</option>
						<option value="MA">Massachusetts</option>
						<option value="MI">Michigan</option>
						<option value="MN">Minnesota</option>
						<option value="MS">Mississippi</option>
						<option value="MO">Missouri</option>
						<option value="MT">Montana</option>
						<option value="NE">Nebraska</option>
						<option value="NV">Nevada</option>
						<option value="NH">New Hampshire</option>
						<option value="NJ">New...

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 , 
    createFilter: function(input) {
    	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>' : '') +
            '</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;
    },
   ...