title: Select2 dependent dropdown with templating and search
body: <p>I have 2 lists. When I select a value in the first one, it updates the options in the second list. Only the second list is a Select2.</p>
  
  <p><a href="https://i.stack.imgur.com/IUfpF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IUfpF.png" alt="enter image description here"></a></p>
  
  <p>I made it work but the search functionality of Select2 doesn't work.</p>
  
  <p><a href="https://i.stack.imgur.com/mB7sI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mB7sI.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/zkXOi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkXOi.png" alt="enter image description here"></a></p>
  
  <p>If I check the DOM, I notice that the options generated by Select2 don't have a text. Is it because of it that the search doesn't work ?</p>
  
  <p><a href="https://i.stack.imgur.com/30WNa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/30WNa.png" alt="enter image description here"></a></p>
  
  <p>Here is my JS code :</p>
  
  <pre><code>$('.category').change(function(event) {
      var measure = $(this).parents('.row').find('.measure');
  
      // Modify placeholder when searching
      measure.prop('disabled', true).select2({placeholder: "Searching..."});
  
      // Remove existing options of the list (of a previous usage)
      measure.children('option').each(function(index, el) {
          if ($(el).val().length &gt; 0)
              $(el).remove();
      });
  
      var DATA = 'tagcat=' + $(this).val();
  
      $.ajax({
          type    : "GET",
          url     : $('.custom-table-container').data('search-js'),
          data    : DATA,
          cache   : false,
          success : function(response) {
              var data = JSON.parse(response);
  
              // Update the measures list    
              measure.select2({
                  allowClear       : true,
                  data             : data.items,
                  escapeMarkup     : function (markup) { return markup; },
                  templateResult   : formatTag,
                  templateSelection: formatTagSelect
              }).prop('disabled', false);
          }
      });
  });
  </code></pre>
  
  <p>I was able to make the search work in adding manually the HTML options in the list but I loose the result template...</p>
  
  <p><a href="https://i.stack.imgur.com/oSXhL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oSXhL.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/wvAaa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wvAaa.png" alt="enter image description here"></a></p>
  
  <p>Code :</p>
  
  <pre><code>$.ajax({
      // ...
      success : function(response) {
          var data = JSON.parse(response);
  
          data.items.forEach(function(tag) {
              // create the option and append to Select2
              var option = new Option(tag.name, tag.id, false, false);
              measure.append(option);
          });
  
          measure.select2({
              allowClear          : true,
              data                : data.items,
              escapeMarkup        : function (markup) { return markup; },
             templateResult       : formatTag,
             templateSelection    : formatTagSelect
          }).prop('disabled', false);
      }
  });
  </code></pre>
  
  <p>How am I suppose to code this to have both templating and search ?</p>