JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="js-source-states">
  <option>Aluminum, Алюминий</option>
  <option>Латунь, или тунь</option>
  <option>Вода или водичка</option>
</select>

CSS

.boldwrap {
  font-weight: bold;
}

.select2-rendered__match {
  background-color: yellow;
  color: black;
}

JavaScript

function markMatch(text, term) {

	  var startString = '<span class="boldwrap">';
	  var endString = text.replace(startString, '');

	  var match = endString.toUpperCase().indexOf(term.toUpperCase());
	  var $result = $('<span></span>');

	  if (match < 0) {
	    return $result.text(text);
	  }


	  var elementToReplace = endString.substr(match, term.length);

	  var $match = '<span class="select2-rendered__match">' + endString.substring(match, match + term.length) + '</span>';

	  text = startString + endString.replace(elementToReplace, $match);

	  console.log(text);


	  $result.append(text);
	  return $result;
	}

	$('.js-source-states').select2({

	  dropdownAutoWidth: false,
	  width: '100%',
	  templateResult: function(item) {
	    if (item.loading) {
	      return item.text;
	    }
	    var term = query.term || '';
	    var $result = markMatch('<span class="boldwrap">' + item.text.substring(0, item.text.indexOf(":")) + '</span>' + item.text.substring(item.text.indexOf(":")), term);
	    return $result;

	  },

	  language: {
	    searching: function(params) {
	      // Intercept the query as it is happening
	      query = params;
	      // Change this to be appropriate for your application
	      return 'Searching...';
	    }
	  },
	  cache: true

	});