select2 - hiding the search box

Question

For my more significant selects, the search box in Select2 is wonderful. However, in one instance, I have a simple selection of 4 hard-coded choices. In this case, the search box is superfluous and looks a little silly being present. Is it possible to hide it somehow? I took a look through the documentation online and couldn't find any options for this in the constructor.

I could, of course, just use a regular HTML select, but for consistency, I'd like to use Select2 if possible.

Canter

Thank you for the idea. Although I knew about .show() and .hide() in jQuery, it didn't occur to me that the plug-in would continue to work if I did something like that outside of its own options. Nevertheless, at first glance, it seems to work :) – Canter

Can you explain what the hide method does and how it works? Are you telling me it only hides the search box because that does not seem to be the case at all – Al

@Al The hide method is described here: api.jquery.com/hide As long as you only apply it to the appropriate selector then, yes, it should hide the search box alone. Nevertheless, there are plugin-specific methods that can be employed to hide it, which I would recommend you use instead (see below). – Canter

Got here because I wanted to put the search box on a secect 2, which didn't have it. I just had to remove the minimumResultsForSearch: -1 line which someone has added on the setup options before. – Atomy

Answer 1

See this thread https://github.com/ivaynberg/select2/issues/489, you can hide the search box by setting minimumResultsForSearch to a negative value.

$('select').select2({
    minimumResultsForSearch: -1
});

Sivia

The main issue here as mentionned in the ticket on github is on mobile it still display the keyboard. We have replaced select2 with chosen. – Indign

and it translates perfectly to angular-ui ui-select2 ! – Kempe

Very handy option! I used it to show search for 10 and more options. No need for manual removing search input. – Spunky

@KevinBrown Infinity is not a negative value. Your edit makes the text and the code not match up. The issue linked to specifically points out that a negative value is the correct supported approach. The issue linked to also claims "High value of minimumResultsForSearch only hides searchbox in opened select. But if we type some letter while select is closed and focused - search will pop up, no matter how high is" and although I cannot reproduce that particular problem in the current version, it is likely to be a real problem in older versions. For those reasons, I rolled back your edit. – Synecdoche

When using an ajax call to initially populate the dropdown, this hides the search box after the results are rendered. Up until then it shows the box while 'searching' is displayed and data is loaded. – Charlot

But, it completely disables the search functionality. – Excrete

This does not work on select2 V4. For V4 use minimumResultsForSearch: "Infinity". – Elfie

This is very helpful when you're encountering search bar showing up on page load. – Armallas

Works with ng-select2 as well. – Flavour

Answer 2

It's on their Examples page: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Hashish

I think -1 is better than Infinity – Carolacarolan

Answer 3

Version 4.0.3

Try not to mix user interface requirements with your JavaScript code.

You can hide the search box in the markup with the attribute:

data-minimum-results-for-search="Infinity"

Markup

<select class="select2" data-minimum-results-for-search="Infinity"></select>

Example

$(document).ready(function() {
  $(".select2").select2();
});

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

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

Baeda

Answer 4

.no-search .select2-search {
    display:none
}

$("#test").select2({
    dropdownCssClass : 'no-search'
}); 

Envelope

+1 I like this as it prevents the search box from briefly appearing in the UI while a AJAX request is made. this is also true for the -1 hack. – Benjie

This is definitly best answer for the question because it really prevent event ui such as "searching....". – Butacaine

Worked perfectly, thank you! Just a note to any future Googler's, this requires the select2 full version (select2.full.*), as stated here: github.com/select2/select2/issues/2879#issuecomment-149940634 – Vivacity

Thanks, it's what I was looking for since even with search box hidden it allows to keep search functionnality available when you wish to call it programmatically : $("#myselect").select2("search","search_value") – Snowball

Indeed this is the best option. As @Vivacity says the full version is needed select2.full.min.js as documented on the website: select2.github.io – Counterpoint

Answer 5

Removing the inputs with jQuery works for me:

$(".select2-search, .select2-focusser").remove();

Miocene

Perfect, on mobile the keyboard is not displayed! – Leadsman

This works for all dropdowns on the page, but I can't target specific dropdowns only. Can't be targeted since they're not children of the select2 id. – Panache

add a wrapper to specify – Halfcock

Answer 6

You can set either infinity or -1 for minimumResultsForSearch option

Solution 1

Ref: https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

$('select').select2({
    minimumResultsForSearch: -1
});

Solution 2

Ref: https://select2.org/searching#hiding-the-search-box

$('select').select2({
   minimumResultsForSearch: Infinity
});

Halpin

Answer 7

If you want to hide search for a specific drop down use the id attribute for that.

$('#select_id').select2({ minimumResultsForSearch: -1 });

Kumamoto

Answer 8

This is the best solution, clean and work good :

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

Then, create a class .hidden { display;none; }

Vasoconstrictor

This might have worked well in the past, but doesn't work on the latest version of select2. – Soviet

Answer 9

You can try this

$('#select_id').select2({ minimumResultsForSearch: -1 });

it closes the search results box and then set control unvisible

You can check here in select2 document select2 documents

Selenography

Answer 10

$(document).ready(function() {
  $(".select2").select2();
});

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

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

Julide

Answer 11

I like to do this dynamically depending on the number of options in the select; to hide the search for selects with 10 or fewer results, I do:

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

Littman

Answer 12

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

Speller

Answer 13

//Disable a search on particular selector
$(".my_selector").select2({
    placeholder: "ÁREAS(todas)",
    tags: true,
    width:'100%',
    containerCssClass: "area_disable_search_input" // I add new class 
});

//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);

Speller

Answer 14

If you want to hide on initial opening and you are populating the dropdown via ajax call, add the following to the ajax block in your select2 declaration:

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

To then show it again (and focus) after your ajax request is successful:

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

Charlot

Answer 15

If you have multi attribute in your select, this dirty hack works:

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
    multipleSelect.parent().find('.select2-search--inline').remove();
});

see docs here https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Khalid

Answer 16

try this CSS

input[aria-controls=select2-product-type-results]{
  display: none;
}

this input is search field

Permeance

Answer 17

Just in case someone stumbles on this, there is now a hideSearch option in the constructor which seems closer to what the question was looking for.

echo Select2::widget([ 'name' => 'status','hideSearch' => true, 'data' => [1 => 'Active', 2 => 'Inactive']]);

Mendelism

Where did you found that? – Uralic

Answer 18

If the select is show results one have to use this:

$('#yourSelect2ControlId').select2("close").parent().hide();

it closes the search results box and then set control unvisible

Soche

This will hide entire select field. As a note, the select2 container is inserted into the DOM after click on select. So we cannot bind an event to it. The working solution is the accepted one: minimumResultsForSearch: -1. – Uralic

Answer 19

@Misha Kobrin's answer work well for me So I have decided to explain it more

You want to hide the search box you can do it by jQuery.

for example you have initialized select2 plugin on a drop down having id audience

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

The example works on all devices on which select2 works.

Suppuration

Answer 20

I edited the select2.min.js file to set the select-2__search input field that's generated to readonly="true".

Auburta

Answer 21

For multiselect you have to write js code, there is no settings property.

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

This mentioned on their page: https://select2.org/searching#multi-select

Cheeks