select2 - hiding the search box
JqueryJquery Select2Jquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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
});
Solution 2 - Jquery
It's on their Examples page: https://select2.org/searching#hiding-the-search-box
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
Solution 3 - Jquery
.no-search .select2-search { display:none }$("#test").select2({ dropdownCssClass : 'no-search' });
Solution 4 - Jquery
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>
Solution 5 - Jquery
Removing the inputs with jQuery works for me:
$(".select2-search, .select2-focusser").remove();
Solution 6 - Jquery
If you want to hide search for a specific drop down use the id attribute for that.
$('#select_id').select2({ minimumResultsForSearch: -1 });
Solution 7 - Jquery
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; }
Solution 8 - Jquery
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
Solution 9 - Jquery
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
});
Solution 10 - Jquery
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
Solution 11 - Jquery
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 });
Solution 12 - Jquery
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
Solution 13 - Jquery
//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);
Solution 14 - Jquery
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();
}
Solution 15 - Jquery
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
Solution 16 - Jquery
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']]);
Solution 17 - Jquery
@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.
Solution 18 - Jquery
I edited the select2.min.js
file to set the select-2__search
input field that's generated to readonly="true"
.
Solution 19 - Jquery
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
Solution 20 - Jquery
try this CSS
input[aria-controls=select2-product-type-results]{
display: none;
}
this input is search field