Start again

vendors/select2/docs/_includes/options/dropdown/filtering.html

@@ -0,0 +1,55 @@
+<section>
+  <h2>
+    Can I change when search results are loaded?
+  </h2>
+
+  <h3>
+    Can Select2 wait until the user has typed a search term before triggering the request?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  ajax: {
+    delay: 250 // wait 250 milliseconds before triggering the request
+  }
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    Select2 is allowing long search terms, can this be prevented?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  maximumInputLength: 20 // only allow terms up to 20 characters long
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    I only want the search box if there are enough results
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  minimumResultsForSearch: 20 // at least 20 results must be displayed
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    How can I permanently hide the search box?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  minimumResultsForSearch: Infinity
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+</section>

vendors/select2/docs/_includes/options/dropdown/placement.html

@@ -0,0 +1,39 @@
+<section>
+  <h2>
+    Can I change how the dropdown is placed?
+  </h2>
+
+  <h3 id="dropdown-attachContainer">
+    Can the dropdown be placed directly after the selection container?
+  </h3>
+
+  {% include options/not-written.html %}
+
+  <h3 id="dropdownParent">
+    Can I pick an element for the dropdown to be appended to?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  dropdownParent: $('#my_amazing_modal')
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    I&apos;m using a Bootstrap modal and I can&apos;t use the search box
+  </h3>
+
+  <p>
+    Use the <code>dropdownParent</code> option, setting it to the modal.
+  </p>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    I&apos;m using jQuery UI and I can&apos;t use the search box
+  </h3>
+
+  {% include options/not-written.html %}
+</section>

vendors/select2/docs/_includes/options/dropdown/selections.html

@@ -0,0 +1,29 @@
+<section>
+  <h2>
+    Can I change how selecting results works?
+  </h2>
+
+  <h3>
+    Can I select the highlighted result when the dropdown is closed?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  selectOnClose: true
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    Can I prevent the dropdown from closing when a result is selected?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  closeOnSelect: false
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+</section>

vendors/select2/docs/_includes/options/dropdown/tagging.html

@@ -0,0 +1,89 @@
+<section>
+  <h2>
+    Can options be created based on the search term?
+  </h2>
+
+  <h3>
+    How do I enable tagging?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  tags: true
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    Does tagging work with a single select?
+  </h3>
+
+  <p>
+    Yes.
+  </p>
+
+  {% include options/not-written.html %}
+
+  <h3>
+    How do I add extra properties to the tag?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  createTag: function (params) {
+    var term = $.trim(params.term);
+
+    if (term === '') {
+      return null;
+    }
+
+    return {
+      id: term,
+      text: term,
+      newTag: true // add additional parameters
+    }
+  }
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    Can I control when tags are created?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  createTag: function (params) {
+    // Don't offset to create a tag if there is no @ symbol
+    if (params.term.indexOf('@') === -1) {
+      // Return null to disable tag creation
+      return null;
+    }
+
+    return {
+      id: params.term,
+      text: params.term
+    }
+  }
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+
+  <h3>
+    How do I control the placement of the option?
+  </h3>
+
+{% highlight js linenos %}
+$('select').select2({
+  insertTag: function (data, tag) {
+    // Insert the tag at the end of the results
+    data.push(tag);
+  }
+});
+{% endhighlight %}
+
+  {% include options/not-written.html %}
+</section>