From e6bd9d72ac5231e298f7ce84355329532bf6c92f Mon Sep 17 00:00:00 2001
From: alexweissman <alex@alexanderweissman.com>
Date: Thu, 12 Oct 2017 11:55:01 -0400
Subject: [PATCH] document disabling search for multi-select (#4797)

---
 pages/11.searching/docs.md | 40 ++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/pages/11.searching/docs.md b/pages/11.searching/docs.md
index 5f1af988..c8be27d6 100644
--- a/pages/11.searching/docs.md
+++ b/pages/11.searching/docs.md
@@ -125,7 +125,7 @@ You may limit the maximum length of search terms by using the `maximumInputLengt
 
 ```
 $('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({
-  minimumResultsForSearch: 20 // at least 20 results must be displayed
+    minimumResultsForSearch: 20 // at least 20 results must be displayed
 });
 ```
 
 ## 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({
-  minimumResultsForSearch: Infinity
+$("#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.