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.

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 :) — EleventyOne, Jul 05 '13 at 02:03
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 — IcedDante, Nov 13 '14 at 16:46
@IcedDante The `hide` method is described here: http://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). — EleventyOne, Mar 22 '15 at 20:34

score 554 · Accepted Answer · edited Oct 05 '15 at 08:28

554

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
});

edited Oct 05 '15 at 08:28

answered Jul 15 '13 at 08:30

Blue Smith

8,580
2
28
33

17

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. – toutpt Oct 24 '13 at 08:43
2

and it translates perfectly to angular-ui ui-select2 ! – rhigdon Oct 24 '13 at 22:53
Very handy option! I used it to show search for 10 and more options. No need for manual removing search input. – blazkovicz Aug 12 '14 at 11:03
@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. – Oct 05 '15 at 08:29
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. – Andrew Aug 08 '17 at 16:30
1

But, it completely disables the search functionality. – sudip Feb 14 '19 at 20:44
This does not work on select2 V4. For V4 use minimumResultsForSearch: "Infinity". – ilibilibom Feb 19 '19 at 12:21
This is very helpful when you're encountering search bar showing up on page load. – Mark Salvania Jun 04 '19 at 12:52
Works with ng-select2 as well. – Brandon Nov 30 '21 at 13:42

score 56 · Answer 2 · edited Feb 19 '19 at 13:28

56

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

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

edited Feb 19 '19 at 13:28

Scoots

3,048
2
21
33

answered Apr 08 '16 at 11:27

Sabin

747
5
10

1

I think `-1` is better than `Infinity` – Seth B Feb 17 '21 at 22:17

Aaron Hudon · Answer 3 · 2017-03-23T19:02:55.903

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>

score 40 · Answer 4 · answered Mar 03 '14 at 03:44

40

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

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

answered Mar 03 '14 at 03:44

xicooc

855
7
8

1

+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. – SimonGates Oct 06 '14 at 14:44
This is definitly best answer for the question because it really prevent event ui such as "searching....". – Sarin Suriyakoon Jun 30 '15 at 07:50
6

Worked perfectly, thank you! Just a note to any future Googler's, this requires the select2 full version (select2.full.*), as stated here: https://github.com/select2/select2/issues/2879#issuecomment-149940634 – Othyn Feb 12 '16 at 10:56
1

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") – nicolas Oct 06 '16 at 15:04
Indeed this is the best option. As @Othyn says the full version is needed select2.full.min.js as documented on the website: https://select2.github.io/ – robbpriestley May 10 '17 at 17:06

score 21 · Answer 5 · answered Oct 23 '13 at 12:08

21

Removing the inputs with jQuery works for me:

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

answered Oct 23 '13 at 12:08

Arkaitz Garro

529
4
5

Perfect, on mobile the keyboard is not displayed! – Pieter Meiresone Sep 21 '14 at 15:41
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. – Shaun Lebron Jan 02 '15 at 20:46
2

add a wrapper to specify – YAMM Sep 05 '15 at 00:06

score 6 · Answer 6 · answered Nov 20 '21 at 10:04

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
});

score 5 · Answer 7 · edited May 19 '18 at 07:08

5

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

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

edited May 19 '18 at 07:08

Pradeep

9,667
13
27
34

answered May 19 '18 at 07:00

Saifur Rahman

144
2
14

score 4 · Answer 8 · edited Feb 05 '17 at 09:12

4

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; }

edited Feb 05 '17 at 09:12

rene

41,474
78
114
152

answered Oct 19 '14 at 16:05

YWA

41
1

This might have worked well in the past, but doesn't work on the latest version of select2. – Matt Browne Jul 23 '15 at 20:31

score 3 · Answer 9 · answered Jul 16 '19 at 04:39

3

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

answered Jul 16 '19 at 04:39

Foram

483
5
12

score 1 · Answer 10 · answered Dec 16 '15 at 16:33

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 });

Juan Manuel De Castro · Answer 11 · 2016-08-12T09:09:13.183

1

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

edited Aug 12 '16 at 09:09

answered Aug 12 '16 at 08:07

Juan Manuel De Castro

198
1
6

score 1 · Answer 12 · answered Aug 12 '16 at 09:08

//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);

score 1 · Answer 13 · edited Jul 02 '19 at 11:58

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();
  }

score 1 · Answer 14 · answered Feb 07 '19 at 12:57

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

score 1 · Answer 15 · answered Jun 25 '20 at 07:03

1

try this CSS

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

this input is search field

answered Jun 25 '20 at 07:03

Vajiheh Habibi

379
1
4
16

score 1 · Answer 16 · answered Jan 26 '22 at 14:02

1

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']]);

answered Jan 26 '22 at 14:02

Vlad Apetrei

31
4

Where did you found that? – LucianDex Jun 29 '22 at 06:03

score 1 · Answer 17 · answered Jul 21 '22 at 10:14

$(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>

score 0 · Answer 18 · answered Oct 02 '14 at 07:37

0

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

answered Oct 02 '14 at 07:37

MKK

2,431
20
16

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`. – LucianDex Jun 29 '22 at 05:36

score 0 · Answer 19 · answered Dec 10 '15 at 12:39

@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.

score 0 · Answer 20 · answered Apr 26 '17 at 00:14

0

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

answered Apr 26 '17 at 00:14

capcom

525
7
16

score 0 · Answer 21 · answered Sep 04 '19 at 14:13

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

select2 - hiding the search box

21 Answers21

Linked