JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<select class='select2'>
    <option>Select</option>
    <optgroup label="Vegetables">
        <option>Dr. R. N. Pandey</option>
        <option>Green R. P 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>

CSS

.select2 {
    width: 150px;
}

JavaScript

(function() {
    function matchStart(term, text) {
      
        term = term.toUpperCase();
        text = text.toUpperCase().replace(/\./g, '').replace(/\s+/g, '');
        
        console.log(text);
        
        if (text.indexOf(term) > -1 ) {
            return true;
        }

        return false;
    }

   $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
  $("select").select2({
    matcher: oldMatcher(matchStart)
  })
});
})();