JSFiddle - React, Tailwind, and code Playground

by jasper502

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<select class='select2veg'>
    <option>Select</option>
    <optgroup label="Vegetables">
        <option>Celery</option>
        <option>Green Pepper</option>
        <option>Kale</option>
    </optgroup>
    <optgroup label="Fruits">
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
    </optgroup>
    <optgroup label="Nuts" disabled>
        <option>Almond</option>
        <option>Walnut</option>
        <option>Pine</option>
    </optgroup>
</select>

JavaScript

(function() {
    function matcher(term, text, opt) {
        var $option = $(opt),
            $optgroup = $option.parent('optgroup'),
            label = $optgroup.attr('label');
        
        term = term.toUpperCase();
        text = text.toUpperCase();
        
        if (text.indexOf(term) > -1
             || (label !== undefined 
                 && label.toUpperCase().indexOf(term) > -1)) {
            return true;
        }

        return false;
    }

    $(".select2veg").select2({
        matcher: matcher
    });
})();