JSFiddle - React, Tailwind, and code Playground

by jainpankaj

HTML

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<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.js"></script>

<select class="select2-single" style="width: 200px;" id="single" selectOnClose="true">
  <option value=""></option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#single">Search for 'California'</button>
<br /><br />

<select class="select2-multiple" style="width: 200px;" id="multiple" multiple="multiple">
  <option value=""></option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<button type="button" data-target="#multiple">Search for 'California'</button>

JavaScript

$( document ).ready ( function ( ) {
  // Set Select2 options
  $( '.select2-single' ).select2 ( {
    placeholder: "Please select ...",
    allowClear: true,
    tags: true 
  } );
  $( '.select2-multiple' ).select2 ( {
    placeholder: "Please select ...",
    allowClear: true
  } );
})

function select2_search ($el, term) {
  // It works without opening the control
  //$el.select2('open');
  
  // Get the search box within the dropdown or the selection
  // Dropdown = single, Selection = multiple
  var $search = $el.data('select2').dropdown.$search || $el.data('select2').selection.$search;
  // This is undocumented and may change in the future
  
  $search.val(term);
  // trigger select2 UI refresh - keyup doesnot work, input does
  //$search.trigger('keyup');
  $search.trigger('input');
  // simulate a key enter
  $('.select2-results__option').trigger("mouseup");
}

$('button').on('click', function () {
  var $select = $($(this).data('target'));
  select2_search($select, 'California');
});