JSFiddle - React, Tailwind, and code Playground

by Abhisek DasGupta

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<select id="language" class="chosen-select">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
</select>

CSS

* {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

select {
    width: 300px;
}

.chosen-results .no-results span {
  color: #222;
  font-weight: bold;
}

JavaScript

var select, chosen;

    // cache the select element as we'll be using it a few times
    select = $("#language");

    // init the chosen plugin
    select.chosen({ no_results_text: 'Press Enter to add new entry:' });
    
    // get the chosen object
    chosen = select.data('chosen');

    // Bind the keyup event to the search box input
    chosen.dropdown.find('input').on('keyup', function(e)
    {
        // if we hit Enter and the results list is empty (no matches) add the option
        if (e.which == 13 && chosen.dropdown.find('li.no-results').length > 0)
        {
            var option = $("<option>").val(this.value).text(this.value);
           
            // add the new option
            select.prepend(option);
            // automatically select it
            select.find(option).prop('selected', true);
            // trigger the update
            select.trigger("chosen:updated");
        }
    });