Select2 demo

by Bruno G.

HTML

<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<select id="example" style="width: 300px">
  <option selected value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<hr>
<p>
slks khasldkfhaskl jhaslkdjf haslkdj halskdfh aslkdjhf asldhf alskfh alskdjfh laskdjfh laskjhdf laskjdhf alskdf haslkdhf laksdjhf alsdfh lasdhfla skhdflkahf askldfh lasjkdhf alskjdhf alsdkhf lasdfh sajkh lkjh kjh lk
</p>

CSS

html { background-color:red;}

.select2-results::after {
    content: "PRess enter to select highlighted elemnt";
    text-align: center;
    display: block;
    margin-top: 3px;
    background-color: antiquewhite;
}

JavaScript

var options = $('#example option');

$('#example').select2({
  placeholder: 'Select a month',
  tags: true,
  tokenSeparators: [',', ' '],
  createTag: function(params) { 
  	const lc = params.term.toLowerCase();
    const matchedVal = options.filter(function () { return $(this).text().toLowerCase() === lc; }).val();    
    return (matchedVal) ? 
    	{ id: matchedVal, text: params.term }
      : { id: params.term, text: params.term }
  }
});