select2 - hiding the search box

For my more significant selects, the search box in Select2 is wonderful. However, in one instance, I have a simple select 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.

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

Sabin

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

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

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

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

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>

Removing the inputs with jQuery works for me:

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

YWA

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

Saifur Rahman

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

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

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

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

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

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

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

Andrew

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

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

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

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

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

来源：https://stackoverflow.com/questions/17480040/select2-hiding-the-search-box

标签

jquery

jquery-select2