document disabling search for multi-select (#4797)
This commit is contained in:
parent
fffbad9463
commit
e6bd9d72ac
@ -143,18 +143,42 @@ $('select').select2({
|
|||||||
|
|
||||||
## Hiding the search box
|
## 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">
|
<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>
|
</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
|
minimumResultsForSearch: Infinity
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</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.
|
||||||
|
Loading…
Reference in New Issue
Block a user