disable search on select boxes with multiple selection

[christophervoigt]

Hi everyone,

as the title indicates I'm looking for a possibility to disable the search on selects with multiple selection.

I already know there is:
minimumResultsForSearch: Infinity

And it works fine on selects with single selection, but doesn't seem to have any effect on select boxes with multiple selection.

Oh, and I'm currently using select2 4.0.3..

Here is a fiddle http://jsfiddle.net/jEADR/3608/

thanks in advance :)

[christophervoigt]

My current workaround is this:

$('select').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $( '#'+event.target.id ).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

[nflorentin]

+1

[Sartoric]

+1

[3xcellent]

Also hitting this. Would really like to have the search option disabled for multiselects with finite options. My work-around (not very elegant):

setTimeout(function() {
$('input[type=search]').attr('disabled', 'disabled');
});

[alexweissman]

@chlorophyllkid your solution seems to work well, so I am adding it to the documentation.

[alexweissman]

Now documented here: https://select2.org/searching#multi-select

[thenitai]

I somehow couldn't get the proposed solution to work. However, this one works for me every time:

$('#selectid').on('select2:open select2:opening select2:closing', function( event ) {
  $('.select2-results').css('display', 'none');
});

[emilas44]

Is it possible to completely disable user input. I still can type in the select box. I want to disable it.

[tabarjack]

For those who might wind up here from a google search like I did:

I used this and it works even on a refresh. Note that I haven't tested with sending values to the server because it's only for an in-page filter (and that works so no reason sending to server wouldn't, mentioning just in case).

obj.on('select2:opening', function(e){ $('.select2-search__field').prop(readonly, true); }

[slbteam08]

My current workaround is this:

$('select').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $( '#'+event.target.id ).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

This documented solution works only from the second click on iPad. On the first click before the input is disabled, the iPad keyboard occurs already. Are there any events that can be used before the first click?

[christophervoigt]

I guess at this point workarounds should not be the proper solution to this problem anymore.
It would be far easier to just have a real option like disableSearch: true which handles this use case.

[jjrr13]

Alguien me puede ayudar con mi problema? sucede que mi select2 no busca y se queda en la parte inferior con Serching, y no pasa de ese punto, quizas alguien me puede indicar las posibles razones.

Muchas gracias de ante mano

[Cessquill]

Whilst I'm using the documented workaround on this, there are a few other gotchas I'm wrestling with...

1. After loading, if you click on a label, the text box will be focused, as it has not yet disabled
2. Once you've opened the select box (and hence disabled the search field), the label then does nothing (understandable, but annoying)

As mentioned, a proper option for search disable would be ideal - I'm using it for a user-defined set of options that will only ever be about a dozen, so typing not required. However, any ideas on fixing the above would be handy.

I've tried disabling on load to fix 1, but doesn't work.

[flash1nho]

Hi! How to search local options when select2 ajax query is loaded this options?

[HankLloydRight]

Also hitting this. Would really like to have the search option disabled for multiselects with finite options. My work-around (not very elegant):

setTimeout(function() {
$('input[type=search]').attr('disabled', 'disabled');
});

The other workarounds did not work to totally disable the search on multi-select.
This one did. Thank you.

But an option 'disableSearch: true' would be a nice addition so we don't have to kludge around this.

[FridolinRozncvajk]

$('select').on('select2:opening select2:closing', function( event ) {
	var $searchfield = $(this).parent().find('.select2-search__field');
	$searchfield.prop('disabled', true);
	$searchfield.attr('inputmode','none')
});

adding the inputmode part solved the ipad/iphone first click issue for me

[ghost]

The mentioned fix in the documentation doesn't properly work on mobile. For the first click on mobile, it opens the keyboard anyway.

Below should fix it compltely:

inputElement.parent().find('.select2-search__field').on('focus', () => {
       inputElement.parent().find('.select2-search__field').prop('disabled', true);
  });

where inputElement is the select actual element

[luciandex]

Thank you. My bad! I deleted the comment.

[zmcode]

What if I want to display the search box when I select multiple options

[stephanweigelt]

I tried to get to work the following configuration:

• Multiple selection
• No text search
• Placeholder-text ("Select filter ...")

I did not find a good solution. Disabling the search field introduces a new problem: the disabled search field is still present and does not receive clicks anymore - so it is hard or even impossible to close the drop down again.
Hiding the search field via display:none; is not an option because it contains the placeholder-text and it serves as a target for the browsers keyboard tab-order (accessability).

I use a current Firefox (Version 122, 2024-02-09).

Are there any suggestions?

PS: voted for an official option instead of any kind of workaround

[victormaximchuk19]

I ran into a problem using this approach that the dropdown was only shown if I clicked on a parent span element that contained a disabled search field (I suspect that the disabled property disabled the event listener responsible for it), so using the 'readonly' property instead of 'disabled' worked very well for me.

  el.on('select2:opening select2:closing', function () {
    var searchfield = el.parent().find('.select2-search__field');

    searchfield.on('focus', function () {
      searchfield.prop('readonly', true);
    });
  });

(where 'el' is the select actual element)