JSFiddle - React, Tailwind, and code Playground

by Rasmus Bergström

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen-sprite.png"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/[email protected]"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<div>
    <select class="form-control chosen-select-width" data-placeholder="Recipients" multiple="" tabindex="-1" style="display: none;">
        <option value=""></option>
        <option>Driver 1</option>
        <option>Driver 2</option>
        <option>Driver 3</option>
        <option>Driver 4</option>
        <option>Manager 1</option>
        <option>Manager 2</option>
        <option>Dispatcher 1</option>
        <option>Dispatcher 2</option>
    </select>
</div

JavaScript

$(function () {
    var config = {
        '.chosen-select': {},
            '.chosen-select-deselect': {
            allow_single_deselect: true
        },
            '.chosen-select-no-single': {
            disable_search_threshold: 10
        },
            '.chosen-select-no-results': {
            no_results_text: 'Oops, nothing found!'
        },
            '.chosen-select-width': {
            width: "100%"
        }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
});