Selectize Example

by maxmx

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.bootstrap3.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>
<select class="email-select"></select>

CSS

body {
    padding: 60px;
}
.option > .image,
.option > .text {
    float: left;
}

.option > .text {
    margin-left: 15px;
}

.avatar {
    width: 48px;
    height: 48px;
}

.text .name {
    font-size: 14px;
    font-weight: bold;
}

.text .description {
    color: gray;
}

JavaScript

$('.email-select').selectize({
    valueField: 'name',
    labelField: 'name',
    placeholder: 'Select somebody'
,    options: [{
        description: 'Nice Guy',
        name: 'Brian Reavis',
        imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
    }, {
        description: 'Other nice guy',
        name: 'Nikola Tesla',
        imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
    }],
    render: {
        option: function (item, escape) {
            return '<div class="option">' +
                    '<div class="image">' +
                           '<img class="avatar" src="' + item.imageUrl + '" />' +
                   '</div>' +
                    '<div class="text">' +
                        '<span class="name">' + escape(item.name) + '</span>' +
                        '<p class="description">' + escape(item.description) + '</p>' +
                   '</div>' +
                '</div>';
        }
    }
});