Display separate search box in select2 multiselect

Question

When you are using select2 (dropdown jquery framework) you can make fancy dropdowns with jquery.

As you can see the single select box has an separate search box but the multiselect has its search box inlined.

Is there any possibility to add a separate search box to the multiselect?

$(".my-dropdown").select2();

.my-dropdown{
  width: 50%;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select class="my-dropdown" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

<br /><br /><br />

<select class="my-dropdown">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

Answer 1

I had similar problem today, tried to find some configuration property, that would solve that easily for me, but apparently there is still none available. So I took a look at the source code and...

There are only 2 adjustments needed, to make it work. I use current version Select2 4.0.6-rc.1. I edited these lines:

:4768 get rid of the condition and use SearchableDropdown for select with single and multiple options as well

var SearchableDropdown = Utils.Decorate(Dropdown, DropdownSearch); options.dropdownAdapter = SearchableDropdown;

~:4832 comment this block, to avoid adding search functionality inside select input

  // if (options.multiple) {
  //   options.selectionAdapter = Utils.Decorate(
  //     options.selectionAdapter,
  //     SelectionSearch
  //   );
  // }

That's it :)