JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<script src="http://yourjavascript.com/837110316/chosen-jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.14/chosen-sprite.png"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.14/chosen.css">
<select class="chzn-select" data-placeholder="select your options" style="width: 150px">
    <option value=""></option>
    <option value="option1"></option>
    <option value="option2"></option>
</select>

JavaScript

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

Chosen.prototype.keydown_checker = function (evt) {
    if (event.which === 13) {
        $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
        $(this.form_field).trigger('liszt:updated');
        this.result_highlight = this.search_results.find('li.active-result').last();
        return this.result_select(evt);
    }
}