1
0
mirror of synced 2024-11-26 06:46:04 +03:00

Code samples for options affecting the dropdown

This is just code samples, most of this still needs readable (non-code)
documentation that actually explains what is going on with the options.
This commit is contained in:
Kevin Brown 2016-01-14 19:29:48 -05:00
parent 55aa2c64cc
commit ce2204cff0
3 changed files with 50 additions and 0 deletions

View File

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

View File

@ -13,6 +13,12 @@
Can I pick an element for the dropdown to be appended to? Can I pick an element for the dropdown to be appended to?
</h3> </h3>
<pre class="prettyprint">
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
</pre>
{% include options/not-written.html %} {% include options/not-written.html %}
<h3> <h3>

View File

@ -7,11 +7,23 @@
Can I select the highlighted result when the dropdown is closed? Can I select the highlighted result when the dropdown is closed?
</h3> </h3>
<pre class="prettyprint">
$('select').select2({
selectOnClose: true
});
</pre>
{% include options/not-written.html %} {% include options/not-written.html %}
<h3> <h3>
Can I prevent the dropdown from closing when a result is selected? Can I prevent the dropdown from closing when a result is selected?
</h3> </h3>
<pre class="prettyprint">
$('select').select2({
closeOnSelect: false
});
</pre>
{% include options/not-written.html %} {% include options/not-written.html %}
</section> </section>