Merge pull request #2067 from jdecuyper/gh-pages-hideSelectionFromResult-prettyprint

Add documentation for hideSelectionFromResult

select2-latest.html

@@ -233,6 +233,7 @@ $("#e10_4").select2({
                   <li><a href="#sort_results">Sorting Displayed Results</a></li>
                   <li><a href="#responsive">Responsive Design</a></li>
                   <li><a href="#diacritics">Diacritics Support</a></li>
+                  <li><a href="#allow_duplicated_tags">Allow duplicated tags</a></li>
               </ul>
             </li>
             <li><a href="#documentation">Documentation</a></li>
@@ -979,7 +980,7 @@ $("#e18,#e18_2").select2();
       <article class="row" id="disabled-options">
           <script id="script_e24">
 
-              $(document).ready(function () {
+$(document).ready(function () {
   $('#e24').select2({
       query: function (query){
           var data = {
@@ -993,7 +994,8 @@ $("#e18,#e18_2").select2();
           query.callback(data);
       }
   });
-              });
+});
+
           </script>
           <div class="span12">
               <h3>Disabled options</h3>
@@ -1041,6 +1043,7 @@ $(document).ready(function () {
   });
   $('#e21').select2('data', preload_data )
 });
+
           </script>
           <div class="span12">
               <h3>Lock selections</h3>
@@ -1084,7 +1087,33 @@ $(document).ready(function () {
           </div>
       </article>
 
+      <article class="row" id="allow_duplicated_tags">
+          <div class="span12">
+              <h3>Allow duplicated tags</h3>
+              <p>In multiple mode, select2 doesn't allow the same tag to be selected more than once. This default behavior can be overridden by implementing the <code>hideSelectionFromResult</code> function:</p>
+              <p>
+                  <select id="e31" multiple="multiple" style="width:300px;">
+                      <option>Red</option>
+                      <option>Green</option>
+                      <option>Blue</option>
+                  </select>
+              </p>
+              <script id="script_e25">
   
+  function hideSelection(selectedObject) {
+      return false;
+  };
+  $('#e31').select2({
+      hideSelectionFromResult: hideSelection
+  });
+  
+              </script>
+              <div class="span12">
+                  <h3>Example Code</h3>
+                  <pre class="prettyprint linenums" id="code_e25"></pre>
+              </div>
+          </div>
+      </article>
       </section>
 
       
@@ -1603,6 +1632,38 @@ $("#select").select2({
             </pre>
             <p class="alert alert-info">Function can be used when the dropdown is configured in single and multi-select mode. It is triggered after selecting an item. In single mode it is also triggered after initSelection (when provided).</p>
             </td></tr>
+            <tr><td>hideSelectionFromResult</td><td>function</td><td>
+            <p>Function that determines if the selected item should be displayed or hidden from the result list.</p>
+            <table class="table table-bordered table-striped">
+            <tbody>
+            <tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
+            <tr><td>data</td><td>object</td><td>Selected data.</td></tr>
+            </tbody>
+            </table>
+            <p>By default, the selected item is visible in the result list in single mode and hidden in multi-select mode.
+            This behavior can be overridden by implementing the <code>hideSelectionFromResult</code> function.</p>
+            <p>For instance, in the case of a single select box it can be used to hide the selected item from the result list:</p>
+            <pre class="prettyprint">
+function hideSelectedItem(selectedObject){
+    return true;
+}
+
+$("#e1").select2({
+    hideSelectionFromResult: hideSelectedItem
+})
+            </pre>
+            <p>More complex behavior can be achieved by reading the text of the selected item:</p>
+            <pre class="prettyprint">
+function hideAlaskaFromResult(selectedObject){
+    return selectedObject.data("select2-data").text == "Alaska" ? true : false;
+}
+
+$("#e1").select2({
+    hideSelectionFromResult: hideAlaskaFromResult
+})
+            </pre>
+            <p class="alert alert-info">The return value of <code>hideSelectionFromResult</code> is a boolean. It returns undefined if it is not implemented.</p>
+            </td></tr>
         </table>
 
       <div class="row">