Enable select2 multi-select search box

Question

I need to be able to add a search box to my multi-select fields using select2.

For whatever reason, while search boxes appear as expected in single-select fields, the same select2() call on a multi-select field does not add a search box.

var data = []; // Programatically-generated options array with > 5 options
var placeholder = "select";
$(".mySelect").select2({
    data: data,
    placeholder: placeholder,
    allowClear: false,
    minimumResultsForSearch: 5});

Does select2 not support search boxes with multi-selects? Does anyone have a good similarly-functioning alternative?

Yawata

Answer 1

The answer is that the select2 input element becomes the search box for multiple selects without back end data

if you start typing , your results will start filtering the options

if you have it set to load remote ajax data, it actually does retain a search box, but for multiple selects without a data source, the input is the search bar, which is fairly intuitive

https://select2.github.io/examples.html

Liggett

It turns out our CSS was hiding the search field in the multi-select box. To me, it's not the most intuitive to have separate search bars for single-select and a combined selection/search bar for multi-select, but at least it works. – Yawata

As far as I can see ver 4 with remote ajax data and multiple does not show a search box. So the answers is....no? – Audiophile

This option does not retain searchbox when data options is passed and it brings data as an array of objects. – Sturdy

Answer 2

select2 v4.0.3

<select class="smartsearch_keyword" name="keyword[]" id="keyword" style="width:100%;"></select>

$(".smartsearch_keyword").select2({
    multiple: true,
    ...
});

In addition: to set multiple default selections

Sinistrorse

Simply adding "multiple" to the Select and name[] worked for me. – Faucet

Answer 3

You can use dropdownAdapter options to set original Dropdown with SearchBox. This code working for me (select2 v. 4.0.13):

//Set Dropdown with SearchBox via dropdownAdapter option (https://mcmap.net/q/582138/-how-to-add-selectall-using-dropdownadapter-on-select2-v4)
var Utils = $.fn.select2.amd.require('select2/utils');
var Dropdown = $.fn.select2.amd.require('select2/dropdown');
var DropdownSearch = $.fn.select2.amd.require('select2/dropdown/search');
var CloseOnSelect = $.fn.select2.amd.require('select2/dropdown/closeOnSelect');
var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');

var dropdownAdapter = Utils.Decorate(Utils.Decorate(Utils.Decorate(Dropdown, DropdownSearch), CloseOnSelect), AttachBody);

$('#select2').select2({
    ...
    dropdownAdapter: dropdownAdapter,
    minimumResultsForSearch: 0,
    ...
}).on('select2:opening select2:closing', function (event) {
    //Disable original search (https://select2.org/searching#multi-select)
    var searchfield = $(this).parent().find('.select2-search__field');
    searchfield.prop('disabled', true);
});

Chatelaine

Adapter is complex, but this works :) – Symbiosis

Thank you so much for posting this - this is exactly how I imagine it to work (for my ajax-driven multiple select) with one exception: Is there a way to focus the searchbox upon opening the dropdown? I tried very different selectors and was not able to make the cursor go into the dedicated searchbox... – Borreri

Answer 4

If none of the answers above work for you (new comers), consider wrapping everything between $(document).ready(function() { // your select2 declaration here... }); Sometimes it's a common issue!

Norword

This is more of a general troubleshooting step for jquery instantiation issues and does not apply to the OP's question. – Cribbs