RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 04:56:08 +03:00
Code Issues Projects Releases Wiki Activity

document disabling search for multi-select (#4797)

Browse Source
This commit is contained in:
alexweissman 2017-10-12 11:55:01 -04:00
parent fffbad9463
commit e6bd9d72ac
1 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
pages/11.searching/docs.md
View File

@ -125,7 +125,7 @@ You may limit the maximum length of search terms by using the `maximumInputLengt
``` ```
$('select').select2({ $('select').select2({
maximumInputLength: 20 // only allow terms up to 20 characters long maximumInputLength: 20 // only allow terms up to 20 characters long
}); });
``` ```
@ -137,24 +137,48 @@ This option is useful for cases where local data is used with a small result set
``` ```
$('select').select2({ $('select').select2({
minimumResultsForSearch: 20 // at least 20 results must be displayed minimumResultsForSearch: 20 // at least 20 results must be displayed
}); });
``` ```
## 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.