Move all examples to partials.
This commit is contained in:
Florian Kissling
parent
f54993050e
commit
b74a0ae6e0
37
docs/_includes/examples/basics.html
Normal file
37
docs/_includes/examples/basics.html
Normal file
@ -0,0 +1,37 @@
|
||||
<section>
|
||||
|
||||
<h1 id="basic">The basics</h1>
|
||||
|
||||
<p>
|
||||
Select2 can take a regular select box like this...
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
and turn it into this...
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-single js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class="code" data-fill-from=".js-code-basic"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-basic">
|
||||
$(document).ready(function() {
|
||||
$(".js-example-basic-single").select2();
|
||||
});
|
||||
|
||||
<select class="js-example-basic-single">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
120
docs/_includes/examples/data.html
Normal file
120
docs/_includes/examples/data.html
Normal file
@ -0,0 +1,120 @@
|
||||
<section>
|
||||
|
||||
<h1 id="data-other" class="page-header">
|
||||
Other data sources
|
||||
</h1>
|
||||
|
||||
<h2 id="data-array" >Loading array data</h2>
|
||||
|
||||
<p>
|
||||
Select2 provides a way to load the data from a local array.
|
||||
You can provide initial selections with array data by providing the
|
||||
option tag for the selected values, similar to how it would be done for
|
||||
a standard select.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-data-array form-control"></select>
|
||||
</p>
|
||||
<p>
|
||||
<select class="js-example-data-array-selected form-control">
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-data-array"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-array">
|
||||
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
||||
|
||||
$(".js-example-data-array").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
$(".js-example-data-array-selected").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
<select class="js-example-data-array"></select>
|
||||
|
||||
<select class="js-example-data-array-selected">
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<h2 id="data-ajax" >Loading remote data</h2>
|
||||
|
||||
<p>
|
||||
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
||||
In this example, we can search for repositories using GitHub's API.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-data-ajax form-control">
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
When using Select2 with remote data, the HTML required for the
|
||||
<code>select</code> is the same as any other Select2. If you need to
|
||||
provide default selections, you just need to include an
|
||||
<code>option</code> for each selection that contains the value and text
|
||||
that should be displayed.
|
||||
</p>
|
||||
|
||||
<pre data-fill-from=".js-code-data-ajax-html"></pre>
|
||||
|
||||
<p>
|
||||
You can configure how Select2 searches for remote data using the
|
||||
<code>ajax</code> option. More information on the individual options
|
||||
that Select2 handles can be found in the
|
||||
<a href="options.html#ajax">options documentation for <code>ajax</code></a>.
|
||||
</p>
|
||||
|
||||
<pre data-fill-from=".js-code-data-ajax"></pre>
|
||||
|
||||
<p>
|
||||
Select2 will pass any options in the <code>ajax</code> object to
|
||||
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
|
||||
function you specify.
|
||||
</p>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-ajax">
|
||||
$(".js-data-example-ajax").select2({
|
||||
ajax: {
|
||||
url: "https://api.github.com/search/repositories",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term, // search term
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
processResults: function (data, page) {
|
||||
// parse the results into the format expected by Select2.
|
||||
// since we are using custom formatting functions we do not need to
|
||||
// alter the remote JSON data
|
||||
return {
|
||||
results: data.items
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
|
||||
minimumInputLength: 1,
|
||||
templateResult: formatRepo, // omitted for brevity, see the source of this page
|
||||
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-ajax-html">
|
||||
<select class="js-data-example-ajax">
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
43
docs/_includes/examples/disabled-mode.html
Normal file
43
docs/_includes/examples/disabled-mode.html
Normal file
@ -0,0 +1,43 @@
|
||||
<section>
|
||||
|
||||
<h1 id="disabled">Disabled mode</h1>
|
||||
|
||||
<p>
|
||||
Select2 will response the <code>disabled</code> attribute on
|
||||
<code><select></code> elements. You can also initialize Select2
|
||||
with <code>disabled: true</code> to get the same effect.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
|
||||
</p>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
|
||||
<button type="button" class="js-programmatic-enable btn btn-default">
|
||||
Enable
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-disable btn btn-default">
|
||||
Disable
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-disabled">
|
||||
$(".js-programmatic-enable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", false);
|
||||
$(".js-example-disabled-multi").prop("disabled", false);
|
||||
});
|
||||
|
||||
$(".js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", true);
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
32
docs/_includes/examples/disabled-results.html
Normal file
32
docs/_includes/examples/disabled-results.html
Normal file
@ -0,0 +1,32 @@
|
||||
<section>
|
||||
|
||||
<h1 id="disabled-results">Disabled results</h1>
|
||||
|
||||
<p>
|
||||
Select2 will correctly handled disabled results, both with data coming
|
||||
from a standard select (when the <code>disabled</code> attribute is set)
|
||||
and from remote sources, where the object has
|
||||
<code>disabled: true</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-disabled-results form-control">
|
||||
<option value="one">First</option>
|
||||
<option value="two" disabled="disabled">Second (disabled)</option>
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled-results"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-disabled-results">
|
||||
<select class="js-example-disabled-results">
|
||||
<option value="one">First</option>
|
||||
<option value="two" disabled="disabled">Second (disabled)</option>
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
25
docs/_includes/examples/hide-search.html
Normal file
25
docs/_includes/examples/hide-search.html
Normal file
@ -0,0 +1,25 @@
|
||||
<section>
|
||||
|
||||
<h1 id="hide-search">Hiding the search box</h1>
|
||||
|
||||
<p>
|
||||
Select2 allows you to hide the search box depending on the number of
|
||||
options which are displayed. In this example, we use the value
|
||||
<code>Infinity</code> to tell Select2 to never display the search box.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-hide-search js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-hide-search"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-hide-search">
|
||||
$(".js-example-basic-hide-search").select2({
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
90
docs/_includes/examples/localization-rtl-diacritics.html
Normal file
90
docs/_includes/examples/localization-rtl-diacritics.html
Normal file
@ -0,0 +1,90 @@
|
||||
<section>
|
||||
|
||||
<h1 id="localization-rtl-diacritics" class="page-header">
|
||||
Localization, RTL and diacritics support
|
||||
</h1>
|
||||
|
||||
<h2 id="language">Multiple languages</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports displaying the messages in different languages, as well
|
||||
as providing your own
|
||||
<a href="options.html#language">custom messages</a>
|
||||
that can be displayed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The language does not have to be defined when Select2 is being
|
||||
initialized, but instead can be defined in the <code>[lang]</code>
|
||||
attribute of any parent elements as <code>[lang="es"]</code>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-language js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-language"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-language">
|
||||
$(".js-example-language").select2({
|
||||
language: "es"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="rtl">RTL support</h2>
|
||||
|
||||
<p>
|
||||
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
||||
set on the <code><select></code> or any parents of it. You can also
|
||||
initialize Select2 with <code>dir: "rtl"</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-rtl"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-rtl">
|
||||
$(".js-example-rtl").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="diacritics">Diacritics support</h2>
|
||||
|
||||
<p>
|
||||
Select2's default matcher will ignore diacritics, making it easier for
|
||||
users to filter results in international selects. Type "aero" into the
|
||||
select below.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-diacritics form-control">
|
||||
<option>Aeróbics</option>
|
||||
<option>Aeróbics en Agua</option>
|
||||
<option>Aerografía</option>
|
||||
<option>Aeromodelaje</option>
|
||||
<option>Águilas</option>
|
||||
<option>Ajedrez</option>
|
||||
<option>Ala Delta</option>
|
||||
<option>Álbumes de Música</option>
|
||||
<option>Alusivos</option>
|
||||
<option>Análisis de Escritura a Mano</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-diacritics">
|
||||
$(".js-example-diacritics").select2();
|
||||
</script>
|
||||
|
||||
</section>
|
||||
43
docs/_includes/examples/matcher.html
Normal file
43
docs/_includes/examples/matcher.html
Normal file
@ -0,0 +1,43 @@
|
||||
<section>
|
||||
|
||||
<h1 id="matcher">Custom matcher</h1>
|
||||
|
||||
<p>
|
||||
Unlike other dropdowns on this page, this one matches options only if
|
||||
the term appears in the beginning of the string as opposed to anywhere:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This custom matcher uses a
|
||||
<a href="options.html#compat-matcher">compatibility module</a> that is
|
||||
only bundled in the
|
||||
<a href="index.html#builds-full">full version of Select2</a>. You also
|
||||
have the option of using a
|
||||
<a href="options.html#matcher">more complex matcher</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-matcher-start js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-matcher-start"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-matcher-start">
|
||||
function matchStart (term, text) {
|
||||
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
$(".js-example-matcher-start").select2({
|
||||
matcher: oldMatcher(matchStart)
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
28
docs/_includes/examples/multiple-max.html
Normal file
28
docs/_includes/examples/multiple-max.html
Normal file
@ -0,0 +1,28 @@
|
||||
<section>
|
||||
|
||||
<h1 id="multiple-max">
|
||||
Limiting the number of selections
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Select2 multi-value select boxes can set restrictions regarding the
|
||||
maximum number of options selected. The select below is declared with
|
||||
the <code>multiple</code> attribute with <code>maxSelectionLength</code>
|
||||
in the select2 options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple-limit"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-multiple-limit">
|
||||
$(".js-example-basic-multiple-limit").select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
27
docs/_includes/examples/multiple.html
Normal file
27
docs/_includes/examples/multiple.html
Normal file
@ -0,0 +1,27 @@
|
||||
<section>
|
||||
|
||||
<h1 id="multiple">Multiple select boxes</h1>
|
||||
|
||||
<p>
|
||||
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-multiple">
|
||||
$(".js-example-basic-multiple").select2();
|
||||
|
||||
<select class="js-example-basic-multiple" multiple="multiple">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
37
docs/_includes/examples/placeholders.html
Normal file
37
docs/_includes/examples/placeholders.html
Normal file
@ -0,0 +1,37 @@
|
||||
<section>
|
||||
|
||||
<h1 id="placeholders">Placeholders</h1>
|
||||
|
||||
<p>
|
||||
A placeholder value can be defined and will be displayed until a
|
||||
selection is made. Select2 uses the <code>placeholder</code> attribute
|
||||
on multiple select boxes, which requires IE 10+. You can support it in
|
||||
older versions with
|
||||
<a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-placeholder-single js-states form-control">
|
||||
<option></option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-placeholder"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-placeholder">
|
||||
$(".js-example-placeholder-single").select2({
|
||||
placeholder: "Select a state",
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
$(".js-example-placeholder-multiple").select2({
|
||||
placeholder: "Select a state"
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
156
docs/_includes/examples/programmatic-control.html
Normal file
156
docs/_includes/examples/programmatic-control.html
Normal file
@ -0,0 +1,156 @@
|
||||
<section>
|
||||
|
||||
<h1 id="programmatic-control" class="page-header">
|
||||
Programmatic control
|
||||
</h1>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<p>
|
||||
Select2 will trigger some events on the original select element,
|
||||
allowing you to integrate it with other components. You can find more
|
||||
information on events
|
||||
<a href="options.html#events">on the options page</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>change</code> is fired whenever an option is selected or removed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:open</code> is fired whenever the dropdown is opened.
|
||||
<code>select2:opening</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:close</code> is fired whenever the dropdown is closed.
|
||||
<code>select2:closing</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:select</code> is fired whenever a result is selected.
|
||||
<code>select2:selecting</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:unselect</code> is fired whenever a result is unselected.
|
||||
<code>select2:unselecting</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control"></select>
|
||||
</p>
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="s2-event-log">
|
||||
<ul class="js-event-log"></ul>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-events"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-events">
|
||||
var $eventLog = $(".js-event-log");
|
||||
var $eventSelect = $(".js-example-events");
|
||||
|
||||
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
|
||||
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
|
||||
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
|
||||
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
|
||||
|
||||
$eventSelect.on("change", function (e) { log("change"); });
|
||||
|
||||
function log (name, evt) {
|
||||
if (!evt) {
|
||||
var args = "{}";
|
||||
} else {
|
||||
var args = JSON.stringify(evt.params, function (key, value) {
|
||||
if (value && value.nodeName) return "[DOM node]";
|
||||
if (value instanceof $.Event) return "[$.Event]";
|
||||
return value;
|
||||
});
|
||||
}
|
||||
var $e = $("<li>" + name + " -> " + args + "</li>");
|
||||
$eventLog.append($e);
|
||||
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
|
||||
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
|
||||
$e.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2 id="programmatic">Programmatic access</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports methods that allow programmatic control of the
|
||||
component.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
|
||||
<p>
|
||||
<select class="js-example-programmatic js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
||||
<button class="js-programmatic-set-val btn btn-default">
|
||||
Set "California"
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||
<button class="js-programmatic-open btn btn-default">
|
||||
Open
|
||||
</button>
|
||||
<button class="js-programmatic-close btn btn-default">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
||||
<button class="js-programmatic-init btn btn-default">
|
||||
Init
|
||||
</button>
|
||||
<button class="js-programmatic-destroy btn btn-default">
|
||||
Destroy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
||||
Set to California and Alabama
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-programmatic">
|
||||
var $example = $(".js-example-programmatic");
|
||||
var $exampleMulti = $(".js-example-programmatic-multi");
|
||||
|
||||
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
||||
|
||||
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
||||
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
||||
|
||||
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
||||
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
|
||||
|
||||
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
|
||||
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
||||
</script>
|
||||
|
||||
</section>
|
||||
33
docs/_includes/examples/tags.html
Normal file
33
docs/_includes/examples/tags.html
Normal file
@ -0,0 +1,33 @@
|
||||
<section>
|
||||
|
||||
<h1 id="tags">Tagging support</h1>
|
||||
|
||||
<p>
|
||||
Select2 can be used to quickly set up fields used for tagging.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Note that when tagging is enabled the user can select from pre-existing
|
||||
options or create a new tag by picking the first choice, which is what
|
||||
the user has typed into the search box so far.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tags form-control" multiple="multiple">
|
||||
<option selected="selected">orange</option>
|
||||
<option>white</option>
|
||||
<option selected="selected">purple</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-tags"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-tags">
|
||||
$(".js-example-tags").select2({
|
||||
tags: true
|
||||
})
|
||||
</script>
|
||||
|
||||
</section>
|
||||
111
docs/_includes/examples/themes-templating-responsive-design.html
Normal file
111
docs/_includes/examples/themes-templating-responsive-design.html
Normal file
@ -0,0 +1,111 @@
|
||||
<section>
|
||||
|
||||
<h1 id="themes-templating-responsive-design" class="page-header">
|
||||
Themes, templating and responsive design
|
||||
</h1>
|
||||
|
||||
<h2 id="themes">Theme support</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports custom themes using the
|
||||
<a href="options.html#theme">theme option</a>
|
||||
so you can style Select2 to match the rest of your application.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
These are using the <code>classic</code> theme, which matches the old
|
||||
look of Select2.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-theme-single js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-theme"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-theme">
|
||||
$(".js-example-theme-single").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
|
||||
$(".js-example-theme-multiple").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="templating">Templating</h2>
|
||||
|
||||
<p>
|
||||
Various display options of the Select2 component can be changed:
|
||||
You can access the <code><option></code> element
|
||||
(or <code><optgroup></code>) and any attributes on those elements
|
||||
using <code>.element</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Templating is primarily controlled by the
|
||||
<a href="options.html#templateResult"><code>templateResult</code></a>
|
||||
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-templating js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-templating"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-templating">
|
||||
function formatState (state) {
|
||||
if (!state.id) { return state.text; }
|
||||
var $state = $(
|
||||
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="responsive">Responsive design - Percent width</h2>
|
||||
|
||||
<p>
|
||||
Select2's width can be set to a percentage of its parent to support
|
||||
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
||||
width respectively.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||
</p>
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-responsive"></pre>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
Select2 will do its best to resolve the percent width specified via a
|
||||
css class, but it is not always possible. The best way to ensure that
|
||||
Select2 is using a percent based width is to inline the
|
||||
<code>style</code> declaration into the tag.
|
||||
</div>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-responsive">
|
||||
<select class="js-example-responsive" style="width: 50%"></select>
|
||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
36
docs/_includes/examples/tokenizer.html
Normal file
36
docs/_includes/examples/tokenizer.html
Normal file
@ -0,0 +1,36 @@
|
||||
<section>
|
||||
|
||||
<h1 id="tokenizer">Automatic tokenization</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports ability to add choices automatically as the user is
|
||||
typing into the search field. Try typing in the search field below and
|
||||
entering a space or a comma.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The separators that should be used when tokenizing can be specified
|
||||
using the <a href="options.html#tokenSeparators">tokenSeparators</a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tokenizer form-control" multiple="multiple">
|
||||
<option>red</option>
|
||||
<option>blue</option>
|
||||
<option>green</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-tokenizer"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-tokenizer">
|
||||
$(".js-example-tokenizer").select2({
|
||||
tags: true,
|
||||
tokenSeparators: [',', ' ']
|
||||
})
|
||||
</script>
|
||||
|
||||
</section>
|
||||
@ -28,846 +28,27 @@ slug: examples
|
||||
<div class="container s2-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-md-9" role="main">
|
||||
<section>
|
||||
<h1 id="basic">The basics</h1>
|
||||
|
||||
<p>
|
||||
Select2 can take a regular select box like this...
|
||||
</p>
|
||||
{% include examples/basics.html %}
|
||||
{% include examples/multiple.html %}
|
||||
{% include examples/placeholders.html %}
|
||||
{% include examples/data.html %}
|
||||
{% include examples/disabled-mode.html %}
|
||||
{% include examples/disabled-results.html %}
|
||||
{% include examples/multiple-max.html %}
|
||||
{% include examples/hide-search.html %}
|
||||
{% include examples/programmatic-control.html %}
|
||||
{% include examples/tags.html %}
|
||||
{% include examples/tokenizer.html %}
|
||||
{% include examples/matcher.html %}
|
||||
{% include examples/localization-rtl-diacritics.html %}
|
||||
{% include examples/themes-templating-responsive-design.html %}
|
||||
|
||||
<p>
|
||||
<select class="js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
and turn it into this...
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-single js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class="code" data-fill-from=".js-code-basic"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-basic">
|
||||
$(document).ready(function() {
|
||||
$(".js-example-basic-single").select2();
|
||||
});
|
||||
|
||||
<select class="js-example-basic-single">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="multiple">Multiple select boxes</h1>
|
||||
|
||||
<p>
|
||||
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-multiple">
|
||||
$(".js-example-basic-multiple").select2();
|
||||
|
||||
<select class="js-example-basic-multiple" multiple="multiple">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="placeholders">Placeholders</h1>
|
||||
|
||||
<p>
|
||||
A placeholder value can be defined and will be displayed until a
|
||||
selection is made. Select2 uses the <code>placeholder</code> attribute
|
||||
on multiple select boxes, which requires IE 10+. You can support it in
|
||||
older versions with
|
||||
<a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-placeholder-single js-states form-control">
|
||||
<option></option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-placeholder"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-placeholder">
|
||||
$(".js-example-placeholder-single").select2({
|
||||
placeholder: "Select a state",
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
$(".js-example-placeholder-multiple").select2({
|
||||
placeholder: "Select a state"
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="data-other" class="page-header">
|
||||
Other data sources
|
||||
</h1>
|
||||
|
||||
<h2 id="data-array" >Loading array data</h2>
|
||||
|
||||
<p>
|
||||
Select2 provides a way to load the data from a local array.
|
||||
You can provide initial selections with array data by providing the
|
||||
option tag for the selected values, similar to how it would be done for
|
||||
a standard select.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-data-array form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-data-array-selected form-control">
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-data-array"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-array">
|
||||
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
||||
|
||||
$(".js-example-data-array").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
$(".js-example-data-array-selected").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
<select class="js-example-data-array"></select>
|
||||
|
||||
<select class="js-example-data-array-selected">
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<h2 id="data-ajax" >Loading remote data</h2>
|
||||
|
||||
<p>
|
||||
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
||||
In this example, we can search for repositories using GitHub's API.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-data-ajax form-control">
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
When using Select2 with remote data, the HTML required for the
|
||||
<code>select</code> is the same as any other Select2. If you need to
|
||||
provide default selections, you just need to include an
|
||||
<code>option</code> for each selection that contains the value and text
|
||||
that should be displayed.
|
||||
</p>
|
||||
|
||||
<pre data-fill-from=".js-code-data-ajax-html"></pre>
|
||||
|
||||
<p>
|
||||
You can configure how Select2 searches for remote data using the
|
||||
<code>ajax</code> option. More information on the individual options
|
||||
that Select2 handles can be found in the
|
||||
<a href="options.html#ajax">options documentation for <code>ajax</code></a>.
|
||||
</p>
|
||||
|
||||
<pre data-fill-from=".js-code-data-ajax"></pre>
|
||||
|
||||
<p>
|
||||
Select2 will pass any options in the <code>ajax</code> object to
|
||||
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
|
||||
function you specify.
|
||||
</p>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-ajax">
|
||||
$(".js-data-example-ajax").select2({
|
||||
ajax: {
|
||||
url: "https://api.github.com/search/repositories",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term, // search term
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
processResults: function (data, page) {
|
||||
// parse the results into the format expected by Select2.
|
||||
// since we are using custom formatting functions we do not need to
|
||||
// alter the remote JSON data
|
||||
return {
|
||||
results: data.items
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
|
||||
minimumInputLength: 1,
|
||||
templateResult: formatRepo, // omitted for brevity, see the source of this page
|
||||
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-ajax-html">
|
||||
<select class="js-data-example-ajax">
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="disabled">Disabled mode</h1>
|
||||
|
||||
<p>
|
||||
Select2 will response the <code>disabled</code> attribute on
|
||||
<code><select></code> elements. You can also initialize Select2
|
||||
with <code>disabled: true</code> to get the same effect.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
|
||||
<p>
|
||||
<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
|
||||
<button type="button" class="js-programmatic-enable btn btn-default">
|
||||
Enable
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-disable btn btn-default">
|
||||
Disable
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-disabled">
|
||||
$(".js-programmatic-enable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", false);
|
||||
$(".js-example-disabled-multi").prop("disabled", false);
|
||||
});
|
||||
|
||||
$(".js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", true);
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 id="disabled-results">Disabled results</h1>
|
||||
|
||||
<p>
|
||||
Select2 will correctly handled disabled results, both with data coming
|
||||
from a standard select (when the <code>disabled</code> attribute is set)
|
||||
and from remote sources, where the object has
|
||||
<code>disabled: true</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-disabled-results form-control">
|
||||
<option value="one">First</option>
|
||||
<option value="two" disabled="disabled">Second (disabled)</option>
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled-results"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-disabled-results">
|
||||
<select class="js-example-disabled-results">
|
||||
<option value="one">First</option>
|
||||
<option value="two" disabled="disabled">Second (disabled)</option>
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="multiple-max">
|
||||
Limiting the number of selections
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Select2 multi-value select boxes can set restrictions regarding the
|
||||
maximum number of options selected. The select below is declared with
|
||||
the <code>multiple</code> attribute with <code>maxSelectionLength</code>
|
||||
in the select2 options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple-limit"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-multiple-limit">
|
||||
$(".js-example-basic-multiple-limit").select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="hide-search">Hiding the search box</h1>
|
||||
|
||||
<p>
|
||||
Select2 allows you to hide the search box depending on the number of
|
||||
options which are displayed. In this example, we use the value
|
||||
<code>Infinity</code> to tell Select2 to never display the search box.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-hide-search js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-hide-search"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-hide-search">
|
||||
$(".js-example-basic-hide-search").select2({
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="programmatic-control" class="page-header">
|
||||
Programmatic control
|
||||
</h1>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<p>
|
||||
Select2 will trigger some events on the original select element,
|
||||
allowing you to integrate it with other components. You can find more
|
||||
information on events
|
||||
<a href="options.html#events">on the options page</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>change</code> is fired whenever an option is selected or removed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:open</code> is fired whenever the dropdown is opened.
|
||||
<code>select2:opening</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:close</code> is fired whenever the dropdown is closed.
|
||||
<code>select2:closing</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:select</code> is fired whenever a result is selected.
|
||||
<code>select2:selecting</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>select2:unselect</code> is fired whenever a result is unselected.
|
||||
<code>select2:unselecting</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="s2-event-log">
|
||||
<ul class="js-event-log"></ul>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-events"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-events">
|
||||
var $eventLog = $(".js-event-log");
|
||||
var $eventSelect = $(".js-example-events");
|
||||
|
||||
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
|
||||
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
|
||||
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
|
||||
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
|
||||
|
||||
$eventSelect.on("change", function (e) { log("change"); });
|
||||
|
||||
function log (name, evt) {
|
||||
if (!evt) {
|
||||
var args = "{}";
|
||||
} else {
|
||||
var args = JSON.stringify(evt.params, function (key, value) {
|
||||
if (value && value.nodeName) return "[DOM node]";
|
||||
if (value instanceof $.Event) return "[$.Event]";
|
||||
return value;
|
||||
});
|
||||
}
|
||||
var $e = $("<li>" + name + " -> " + args + "</li>");
|
||||
$eventLog.append($e);
|
||||
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
|
||||
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
|
||||
$e.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2 id="programmatic">Programmatic access</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports methods that allow programmatic control of the
|
||||
component.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-programmatic js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
||||
<button class="js-programmatic-set-val btn btn-default">
|
||||
Set "California"
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||
<button class="js-programmatic-open btn btn-default">
|
||||
Open
|
||||
</button>
|
||||
<button class="js-programmatic-close btn btn-default">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
||||
<button class="js-programmatic-init btn btn-default">
|
||||
Init
|
||||
</button>
|
||||
<button class="js-programmatic-destroy btn btn-default">
|
||||
Destroy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
||||
Set to California and Alabama
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-programmatic">
|
||||
var $example = $(".js-example-programmatic");
|
||||
var $exampleMulti = $(".js-example-programmatic-multi");
|
||||
|
||||
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
||||
|
||||
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
||||
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
||||
|
||||
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
||||
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
|
||||
|
||||
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
|
||||
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="tags">Tagging support</h1>
|
||||
|
||||
<p>
|
||||
Select2 can be used to quickly set up fields used for tagging.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Note that when tagging is enabled the user can select from pre-existing
|
||||
options or create a new tag by picking the first choice, which is what
|
||||
the user has typed into the search box so far.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tags form-control" multiple="multiple">
|
||||
<option selected="selected">orange</option>
|
||||
<option>white</option>
|
||||
<option selected="selected">purple</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-tags"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-tags">
|
||||
$(".js-example-tags").select2({
|
||||
tags: true
|
||||
})
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="tokenizer">Automatic tokenization</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports ability to add choices automatically as the user is
|
||||
typing into the search field. Try typing in the search field below and
|
||||
entering a space or a comma.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The separators that should be used when tokenizing can be specified
|
||||
using the <a href="options.html#tokenSeparators">tokenSeparators</a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tokenizer form-control" multiple="multiple">
|
||||
<option>red</option>
|
||||
<option>blue</option>
|
||||
<option>green</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-tokenizer"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-tokenizer">
|
||||
$(".js-example-tokenizer").select2({
|
||||
tags: true,
|
||||
tokenSeparators: [',', ' ']
|
||||
})
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="matcher">Custom matcher</h1>
|
||||
|
||||
<p>
|
||||
Unlike other dropdowns on this page, this one matches options only if
|
||||
the term appears in the beginning of the string as opposed to anywhere:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This custom matcher uses a
|
||||
<a href="options.html#compat-matcher">compatibility module</a> that is
|
||||
only bundled in the
|
||||
<a href="index.html#builds-full">full version of Select2</a>. You also
|
||||
have the option of using a
|
||||
<a href="options.html#matcher">more complex matcher</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-matcher-start js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-matcher-start"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-matcher-start">
|
||||
function matchStart (term, text) {
|
||||
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
$(".js-example-matcher-start").select2({
|
||||
matcher: oldMatcher(matchStart)
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="localization-rtl-diacritics" class="page-header">
|
||||
Localization, RTL and diacritics support
|
||||
</h1>
|
||||
|
||||
<h2 id="language">Multiple languages</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports displaying the messages in different languages, as well
|
||||
as providing your own
|
||||
<a href="options.html#language">custom messages</a>
|
||||
that can be displayed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The language does not have to be defined when Select2 is being
|
||||
initialized, but instead can be defined in the <code>[lang]</code>
|
||||
attribute of any parent elements as <code>[lang="es"]</code>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-language js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-language"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-language">
|
||||
$(".js-example-language").select2({
|
||||
language: "es"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="rtl">RTL support</h2>
|
||||
|
||||
<p>
|
||||
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
||||
set on the <code><select></code> or any parents of it. You can also
|
||||
initialize Select2 with <code>dir: "rtl"</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-rtl"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-rtl">
|
||||
$(".js-example-rtl").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="diacritics">Diacritics support</h2>
|
||||
|
||||
<p>
|
||||
Select2's default matcher will ignore diacritics, making it easier for
|
||||
users to filter results in international selects. Type "aero" into the
|
||||
select below.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-diacritics form-control">
|
||||
<option>Aeróbics</option>
|
||||
<option>Aeróbics en Agua</option>
|
||||
<option>Aerografía</option>
|
||||
<option>Aeromodelaje</option>
|
||||
<option>Águilas</option>
|
||||
<option>Ajedrez</option>
|
||||
<option>Ala Delta</option>
|
||||
<option>Álbumes de Música</option>
|
||||
<option>Alusivos</option>
|
||||
<option>Análisis de Escritura a Mano</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-diacritics">
|
||||
$(".js-example-diacritics").select2();
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h1 id="themes-templating-responsive-design" class="page-header">
|
||||
Themes, templating and responsive design
|
||||
</h1>
|
||||
|
||||
<h2 id="themes">Theme support</h2>
|
||||
|
||||
<p>
|
||||
Select2 supports custom themes using the
|
||||
<a href="options.html#theme">theme option</a>
|
||||
so you can style Select2 to match the rest of your application.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
These are using the <code>classic</code> theme, which matches the old
|
||||
look of Select2.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-theme-single js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-theme"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-theme">
|
||||
$(".js-example-theme-single").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
|
||||
$(".js-example-theme-multiple").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="templating">Templating</h2>
|
||||
|
||||
<p>
|
||||
Various display options of the Select2 component can be changed:
|
||||
You can access the <code><option></code> element
|
||||
(or <code><optgroup></code>) and any attributes on those elements
|
||||
using <code>.element</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Templating is primarily controlled by the
|
||||
<a href="options.html#templateResult"><code>templateResult</code></a>
|
||||
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-templating js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-templating"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-templating">
|
||||
function formatState (state) {
|
||||
if (!state.id) { return state.text; }
|
||||
var $state = $(
|
||||
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 id="responsive">Responsive design - Percent width</h2>
|
||||
|
||||
<p>
|
||||
Select2's width can be set to a percentage of its parent to support
|
||||
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
||||
width respectively.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-responsive"></pre>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
Select2 will do its best to resolve the percent width specified via a
|
||||
css class, but it is not always possible. The best way to ensure that
|
||||
Select2 is using a percent based width is to inline the
|
||||
<code>style</code> declaration into the tag.
|
||||
</div>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-responsive">
|
||||
<select class="js-example-responsive" style="width: 50%"></select>
|
||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||
</script>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-md-3" role="complementary">
|
||||
|
||||
{% include nav/examples.html %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user