title: jQuery Select2 onkeyup not firing
body: <p>I am trying to update the options of the Select2 input field with an AJAX call, but the onkeyup function linked to the input field does not run.</p>
  
  <p>*Note that the onkeyup function does run when I set the multiple attribute of the select box as <code>multiple="multiple"</code>, but when I try to get a single result like the select box by removing the attribute nothing happens</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;select class="js-example-templating" style="width: 50%"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>My jQuery looks like this:</p>
  
  <pre><code>ar 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 = $('&lt;span&gt;&lt;img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /&gt; ' + state.text + '&lt;/span&gt;');
      return $state;
  };
  
  $(".js-example-templating").select2({
      minimumInputLength: 1,
      templateResult : formatState
  });
  
  $('.select2-search__field').on('keyup', 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 += '&lt;optgroup label="'+group+'"&gt;';
  
          console.log(options);
  
          $(options).each(function(i) {
              var option_id = options[i][0];
              var option_text = options[i][1];
  
              tmp_html += '&lt;option value="'+option_id+'"&gt;'+option_text+'&lt;/option&gt;';
          });
  
          tmp_html += '&lt;/optgroup&gt;';  
      }); 
  
      //now add the new options to the select box
  
      $('.js-example-templating').html(tmp_html);
  });  
  </code></pre>
  
  <p>The AJAX function has not been added, the onkeyup function at the moment just adds all the options, this will be added as soon as I can get the onkeyup function to run.</p>
  
  <p>After this all the Select box is supposed to have the following options:</p>
  
  <pre><code>  &lt;optgroup label="Alaskan/Hawaiian Time Zone"&gt;
      &lt;option value="AK"&gt;Alaska&lt;/option&gt;
      &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Pacific Time Zone"&gt;
      &lt;option value="CA"&gt;California&lt;/option&gt;
      &lt;option value="NV"&gt;Nevada&lt;/option&gt;
      &lt;option value="OR"&gt;Oregon&lt;/option&gt;
      &lt;option value="WA"&gt;Washington&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Mountain Time Zone"&gt;
      &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
      &lt;option value="CO"&gt;Colorado&lt;/option&gt;
      &lt;option value="ID"&gt;Idaho&lt;/option&gt;
      &lt;option value="MT"&gt;Montana&lt;/option&gt;
      &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
      &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
      &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
      &lt;option value="UT"&gt;Utah&lt;/option&gt;
      &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
    &lt;/optgroup&gt;
  </code></pre>
  
  <p>Thanx in advance</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p>The input field gets added automatically when the Select2 initialization starts.
  The code for the input field look like this:</p>
  
  <pre><code>&lt;input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"&gt;
  </code></pre>
  
  <p>Here is a fiddle of what is happening:
  <a href="https://jsfiddle.net/Reckless/hz2vqzt7/" rel="noreferrer">https://jsfiddle.net/Reckless/hz2vqzt7/</a></p>
  
  <p>When you add the <code>multiple="multiple"</code> attribute and run again, it will update the available options, but without that it does not fire the onkeyup event</p>