title: How to add Search feature in multiselect dropdown list at Select2
body: <p>I am trying to add Search feature in <a href="https://select2.org" rel="nofollow noreferrer">Select2</a> like <a href="https://stackoverflow.com/a/37918749/5043301">this</a>. My Code is like below.</p>
  <pre><code>(function($) {  
    $(document).ready(function() {
      $(&quot;.volunteer&quot;).on(&quot;click&quot;, function (event) {
          let element_id = event.target.id;
          // Check if select is already loaded
          if (!$(this).has(&quot;select&quot;).length) {
            var cellEle = $(this);
  
            // Populate select element
            cellEle.html(`&lt;select multiple=&quot;multiple&quot;&gt;&lt;/select&gt;`);
  
            // Initialise select2
            let selectEle = cellEle.children(&quot;select&quot;).select2({
              matcher: function(params, data) {
                // If there are no search terms, return all of the data
                if ($.trim(params.term) === '') {
                  return data;
                }
                // Skip if there is no 'children' property
                if (typeof data.children === 'undefined') {
                  return null;
                }
                // `data.children` contains the actual options that we are matching against
                var filteredChildren = [];
                $.each(data.children, function (idx, child) {
                  if (child.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                    filteredChildren.push(child);
                  }
                });
                // If we matched any of the timezone group's children, then set the matched children on the group
                // and return the group object
                if (filteredChildren.length) {
                  var modifiedData = $.extend({}, data, true);
                  modifiedData.children = filteredChildren;
  
                  // You can return modified objects from here
                  // This includes matching the `children` how you want in nested data sets
                  return modifiedData;
                }
                // Return `null` if the term should not be displayed
                return null;
              },
              minimumInputLength: 2,
              allowClear: true,
              maximumSelectionLength: 3,
              minimumResultsForSearch: 5,
              multiple: true,
              ajax: {
                url: &quot;/wp-admin/admin-ajax.php&quot;,
                dataType: 'json',
                data: function (params, page) {
                  return {
                    action: 'get_data',
                    q: params,
                  };
                },
                type: &quot;post&quot;,
                processResults: function (data) {
                  var options = [];
                  if (data) {
                    $.each(data, function (index, text) {
                      options.push({ id: index, text: text });
                    });
                  }
                  return {
                    results: options
                  };
                }
              }
            });
          }
      });
    });
  })(jQuery)
  </code></pre>
  <p>But I am not getting Search feature. I am getting output like below.</p>
  <p><a href="https://i.stack.imgur.com/tDBnC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tDBnC.png" alt="enter image description here" /></a></p>