Menu
In order to hide the search box in select2, you can hide the search box by setting "minimumResultsForSearch" to a negative value. $('select'). select2({ minimumResultsForSearch: -1 });
When users filter down the results by entering search terms into the search box, Select2 uses an internal "matcher" to match search terms to results. You may customize the way that Select2 matches search terms by specifying a callback for the matcher configuration option.
In order to clear the selection of those values which are selected using a Select2 drop down,we can use the empty() function. The dropdown can be reset using Jquery. $("#select2_example"). empty();
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).
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
});
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();
If you want to hide search for a specific drop down use the id attribute for that.
$('#select_id').select2({ minimumResultsForSearch: -1 });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With