1
0
mirror of synced 2024-11-25 14:26:03 +03:00

document disabling search for multi-select (#4797)

This commit is contained in:
alexweissman 2017-10-12 11:55:01 -04:00
parent fffbad9463
commit e6bd9d72ac

View File

@ -143,18 +143,42 @@ $('select').select2({
## Hiding the search box
Select2 allows you to hide the search box depending on the number of options which are displayed. In this example, we use the value `Infinity` to tell Select2 to never display the search box.
### Single select
For single selects, Select2 allows you to hide the search box using the `minimumResultsForSearch` configuration option. In this example, we use the value `Infinity` to tell Select2 to never display the search box.
<div class="s2-example">
<select class="js-example-basic-hide-search js-states form-control"></select>
<select id="js-example-basic-hide-search" class="js-states form-control"></select>
</div>
<pre data-fill-from=".js-code-example-basic-hide-search"></pre>
<pre data-fill-from="#js-code-example-basic-hide-search"></pre>
<script type="text/javascript" class="js-code-example-basic-hide-search">
<script type="text/javascript" id="js-code-example-basic-hide-search">
$(".js-example-basic-hide-search").select2({
$("#js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
</script>
### Multi-select
For multi-select boxes, there is no distinct search control. So, to disable search for multi-select boxes, you will need to set the `disabled` property to true whenever the dropdown is opened or closed:
<div class="s2-example">
<select id="js-example-basic-hide-search-multi" class="js-states form-control" multiple="multiple"></select>
</div>
<pre data-fill-from="#js-code-example-basic-hide-search-multi"></pre>
<script type="text/javascript" id="js-code-example-basic-hide-search-multi">
$('#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);
});
</script>
See [this issue](https://github.com/select2/select2/issues/4797) for the source of this solution.