JSFiddle - React, Tailwind, and code Playground

by bilbobaggins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="js-example-templating" style="width: 50%"></select>

JavaScript

var all_options = [
		['Alaskan/Hawaiian Time Zone', [['AK','Alaska'], ['HI','Hawaii']]],
		['Pacific Time Zone', [['CA','California'], ['NV','Nevada'], ['OR','Oregon'], ['WA','Washington']]],
		['Mountain Time Zone', [['CAAZ','Arizona'], ['CO','Colorado'], ['ID','Idaho'], ['MT','Montana'], ['NE','Nebraska'], ['NM','New Mexico'], ['ND','North Dakota'], ['UT','Utah'], ['WY','Wyoming']]]
	];
	
	function formatState(state) {
		if (!state.id) {
			return state.text;
		}
		var $state = $('<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>');
		return $state;
	};

	$(".js-example-templating").select2({
		minimumInputLength: 1,
		templateResult : formatState
	});
	
	$(document).on('keyup', '.select2-search__field', function (e) {	
		
		tmp_html = '';
		//do ajax call here
		
		$(all_options).each(function(i) {
			var group = all_options[i][0];
			var options = all_options[i][1];
			
			tmp_html += '<optgroup label="'+group+'">';
			
			console.log(options);
			
			$(options).each(function(i) {
				var option_id = options[i][0];
				var option_text = options[i][1];
				
				tmp_html += '<option value="'+option_id+'">'+option_text+'</option>';
			});
			
			tmp_html += '</optgroup>';	
		});	
		
		//now add the new options to the select box
		
		$('.js-example-templating').html(tmp_html);
	});