JSFiddle - React, Tailwind, and code Playground

by sparanja

HTML

<link rel="stylesheet" href="http://select2.github.io/select2/select2-3.5.2/select2.css">
<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
<select id="e1" style="width:300px;">
	<optgroup label="A1 comps">
       <option value="A1">AAA 1</option>
       <option value="A2">AAA 2</option>
       <option value="A#">AAA 3</option>
       <option value="A4">AAA 4</option>
   </optgroup>
   <optgroup label="B1 comps">
       <option value="B1">BBB 1</option>
       <option value="B2">BBB 2</option>
       <option value="B3">BBB 3</option>
       <option value="B4">BBB 4</option>
   </optgroup>
</select>

JavaScript

$("#e1").val("B1").select2();
$("#e1").on("select2-opening", function() { 
	$("#e1").on("select2-open", function() { 
		$("#e1").select2("search","BB");
	});
})