RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-23 05:26:10 +03:00
Code Issues Projects Releases Wiki Activity

Add sidebar anchor navigation to the "Examples" page.

Browse Source
This commit is contained in:
Florian Kissling 2015-05-02 14:10:31 +02:00
parent 3ed07a6fda
commit bf7d273f89
5 changed files with 630 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/_includes/nav/examples.html Normal file
View File

@ -0,0 +1,67 @@
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav s2-docs-sidenav">
<li>
<a href="#basic">The basics</a>
</li>
<li>
<a href="#multiple">Multiple select boxes</a>
</li>
<li>
<a href="#placeholders">Placeholders</a>
</li>
<li>
<a href="#templating">Templating</a>
</li>
<li>
<a href="#data-array">Loading array data</a>
</li>
<li>
<a href="#data-ajax">Loading remote data</a>
</li>
<li>
<a href="#responsive">Responsive design</a>
</li>
<li>
<a href="#disabled">Disabled mode</a>
</li>
<li>
<a href="#disabled-results">Disabled results</a>
</li>
<li>
<a href="#programmatic">Programmatic access</a>
</li>
<li>
<a href="#multiple-max">Limiting the number of selections</a>
</li>
<li>
<a href="#hide-search">Hiding the search box</a>
</li>
<li>
<a href="#events">Events</a>
</li>
<li>
<a href="#tags">Tagging support</a>
</li>
<li>
<a href="#tokenizer">Automatic tokenization</a>
</li>
<li>
<a href="#matcher">Custom matcher</a>
</li>
<li>
<a href="#diacritics">Diacritics support</a>
</li>
<li>
<a href="#language">Multiple languages</a>
</li>
<li>
<a href="#themes">Theme support</a>
</li>
<li>
<a href="#rtl">RTL support</a>
</li>
</ul>
<a class="back-to-top" href="#top">
Back to top
</a>
</nav>

10
docs/_sass/_prettify.scss
View File

@ -28,11 +28,11 @@
padding: 9px 14px; padding: 9px 14px;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 20px; margin-top: 20px;
border: 1px solid #e8e8e8; border: 1px solid #eee;
&.linenums { &.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -webkit-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
} }
} }
@ -42,6 +42,6 @@ ol.linenums {
} }
ol.linenums li { ol.linenums li {
padding-left: 12px; padding-left: 12px;
color: #bebec5; color: #bebebe;
line-height: 18px; line-height: 18px;
} }

83
docs/_sass/_s2-docs-examples.scss Normal file
View File

@ -0,0 +1,83 @@
.s2-example + pre,
.s2-event-log + pre {
margin: -15px -15px 15px;
border-radius: 0;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.s2-example + pre,
.s2-event-log + pre {
margin-top: -16px;
margin-left: 0;
margin-right: 0;
border-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.s2-event-log {
background: #002451;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
color: white;
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
}
.s2-event-log:after {
content: "Event Log";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #BBB;
text-transform: uppercase;
letter-spacing: 1px;
}
.s2-example {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
background-color: #FAFAFA;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
border-color: #E5E5E5 #EEE #EEE;
border-style: solid;
border-width: 1px 0;
}
@media (min-width: 768px) {
.s2-example {
margin-left: 0;
margin-right: 0;
background-color: #FFF;
border-width: 1px;
border-color: #eee;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.s2-event-log {
margin-left: 0;
margin-right: 0;
margin-top: -15px;
border-width: 1px;
border-color: #eee;
box-shadow: none;
}
}
.s2-example:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #BBB;
text-transform: uppercase;
letter-spacing: 1px;
}

9
docs/css/s2-docs.scss
View File

@ -8,6 +8,7 @@
@import "s2-docs-footer"; @import "s2-docs-footer";
@import "s2-docs-alert"; @import "s2-docs-alert";
@import "s2-docs-home"; @import "s2-docs-home";
@import "s2-docs-examples";
@import "anchorjs"; @import "anchorjs";
@import "jumbotron"; @import "jumbotron";
@import "prettify"; @import "prettify";
@ -62,11 +63,3 @@ pre {
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;
} }
.s2-docs-headline-example {
font-size: 12px;
font-weight: 700;
color: #959595;
text-transform: uppercase;
letter-spacing: 1px;
}

328
docs/examples.html
View File

@ -26,9 +26,10 @@ slug: examples
</section> </section>
<div class="container s2-docs-container"> <div class="container s2-docs-container">
<section id="basic" class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-9" role="main">
<h1>The basics</h1> <section>
<h1 id="basic">The basics</h1>
<p> <p>
Select2 can take a regular select box like this... Select2 can take a regular select box like this...
@ -42,12 +43,11 @@ slug: examples
and turn it into this... and turn it into this...
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-basic-single js-states form-control"></select> <select class="js-example-basic-single js-states form-control"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre class="code" data-fill-from=".js-code-basic"></pre> <pre class="code" data-fill-from=".js-code-basic"></pre>
@ -62,23 +62,20 @@ $(document).ready(function() {
<option value="WY">Wyoming</option> <option value="WY">Wyoming</option>
</select> </select>
</script> </script>
</div>
</section> </section>
<section id="multiple" class="row"> <section>
<div class="col-md-4"> <h1 id="multiple">Multiple select boxes</h1>
<h1>Multiple select boxes</h1>
<p> <p>
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute. Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select> <select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-multiple"></pre> <pre data-fill-from=".js-code-multiple"></pre>
@ -91,35 +88,30 @@ $(".js-example-basic-multiple").select2();
<option value="WY">Wyoming</option> <option value="WY">Wyoming</option>
</select> </select>
</script> </script>
</div>
</section> </section>
<section class="row"> <section>
<div class="col-md-4">
<h1 id="placeholders">Placeholders</h1> <h1 id="placeholders">Placeholders</h1>
<p> <p>
A placeholder value can be defined and will be displayed until a selection is made. 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> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-placeholder-single js-states form-control"> <select class="js-example-placeholder-single js-states form-control">
<option></option> <option></option>
</select> </select>
</p> </p>
<p>
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>
<p> <p>
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select> <select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-placeholder"></pre> <pre data-fill-from=".js-code-placeholder"></pre>
@ -133,22 +125,13 @@ $(".js-example-placeholder-multiple").select2({
placeholder: "Select a state" placeholder: "Select a state"
}); });
</script> </script>
</div>
</section> </section>
<section class="row"> <section>
<div class="col-md-4">
<h1 id="templating">Templating</h1> <h1 id="templating">Templating</h1>
<p> <p>
Various display options of the Select2 component can be changed Various display options of the Select2 component can be changed:
</p>
<p>
<select class="js-example-templating js-states form-control"></select>
</p>
<p>
You can access the <code>&lt;option&gt;</code> element You can access the <code>&lt;option&gt;</code> element
(or <code>&lt;optgroup&gt;</code>) and any attributes on those elements (or <code>&lt;optgroup&gt;</code>) and any attributes on those elements
using <code>.element</code>. using <code>.element</code>.
@ -160,9 +143,12 @@ $(".js-example-placeholder-multiple").select2({
and <a href="options.html#templateSelection"><code>templateSelection</code></a> and <a href="options.html#templateSelection"><code>templateSelection</code></a>
options. options.
</p> </p>
<div class="s2-example">
<p>
<select class="js-example-templating js-states form-control"></select>
</p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-templating"></pre> <pre data-fill-from=".js-code-templating"></pre>
@ -179,35 +165,29 @@ $(".js-example-templating").select2({
templateResult: formatState templateResult: formatState
}); });
</script> </script>
</div>
</section> </section>
<section id="data-array" class="row"> <section>
<div class="col-md-4"> <h1 id="data-array" >Loading array data</h1>
<h1>Loading array data</h1>
<p> <p>
Select2 provides a way to load the data from a local array. Select2 provides a way to load the data from a local array.
</p>
<p>
<select class="js-example-data-array form-control"></select>
</p>
<p>
You can provide initial selections with array data by providing the 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 option tag for the selected values, similar to how it would be done for
a standard select. a standard select.
</p> </p>
<div class="s2-example">
<p>
<select class="js-example-data-array form-control"></select>
</p>
<p> <p>
<select class="js-example-data-array-selected form-control"> <select class="js-example-data-array-selected form-control">
<option value="2" selected="selected">duplicate</option> <option value="2" selected="selected">duplicate</option>
</select> </select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-data-array"></pre> <pre data-fill-from=".js-code-data-array"></pre>
@ -228,12 +208,10 @@ $(".js-example-data-array-selected").select2({
<option value="2" selected="selected">duplicate</option> <option value="2" selected="selected">duplicate</option>
</select> </select>
</script> </script>
</div>
</section> </section>
<section id="data-ajax" class="row"> <section>
<div class="col-md-12"> <h1 id="data-ajax" >Loading remote data</h1>
<h1>Loading remote data</h1>
<p> <p>
Select2 comes with AJAX support built in, using jQuery's AJAX methods. Select2 comes with AJAX support built in, using jQuery's AJAX methods.
@ -305,12 +283,10 @@ $(".js-data-example-ajax").select2({
<option value="3620194" selected="selected">select2/select2</option> <option value="3620194" selected="selected">select2/select2</option>
</select> </select>
</script> </script>
</div>
</section> </section>
<section id="responsive" class="row"> <section>
<div class="col-md-4"> <h1 id="responsive">Responsive design - Percent width</h1>
<h1>Responsive design - Percent width</h1>
<p> <p>
Select2's width can be set to a percentage of its parent to support Select2's width can be set to a percentage of its parent to support
@ -318,6 +294,7 @@ $(".js-data-example-ajax").select2({
width respectively. width respectively.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-responsive js-states" style="width: 50%"></select> <select class="js-example-responsive js-states" style="width: 50%"></select>
</p> </p>
@ -326,8 +303,6 @@ $(".js-data-example-ajax").select2({
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select> <select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-responsive"></pre> <pre data-fill-from=".js-code-responsive"></pre>
@ -342,12 +317,10 @@ $(".js-data-example-ajax").select2({
<select class="js-example-responsive" style="width: 50%"></select> <select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select> <select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
</script> </script>
</div>
</section> </section>
<section id="disabled" class="row"> <section>
<div class="col-md-4"> <h1 id="disabled">Disabled mode</h1>
<h1>Disabled mode</h1>
<p> <p>
Select2 will response the <code>disabled</code> attribute on Select2 will response the <code>disabled</code> attribute on
@ -355,6 +328,8 @@ $(".js-data-example-ajax").select2({
with <code>disabled: true</code> to get the same effect. with <code>disabled: true</code> to get the same effect.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-disabled js-states form-control" disabled="disabled"></select> <select class="js-example-disabled js-states form-control" disabled="disabled"></select>
</p> </p>
@ -363,7 +338,7 @@ $(".js-data-example-ajax").select2({
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select> <select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
</p> </p>
<div class="btn-group" role="group" aria-label="Programmatic enabling and disabling"> <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"> <button type="button" class="js-programmatic-enable btn btn-default">
Enable Enable
</button> </button>
@ -374,9 +349,6 @@ $(".js-data-example-ajax").select2({
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-disabled"></pre> <pre data-fill-from=".js-code-disabled"></pre>
<script type="text/javascript" class="js-code-disabled"> <script type="text/javascript" class="js-code-disabled">
@ -390,12 +362,10 @@ $(".js-programmatic-disable").on("click", function () {
$(".js-example-disabled-multi").prop("disabled", true); $(".js-example-disabled-multi").prop("disabled", true);
}); });
</script> </script>
</div>
</section> </section>
<section id="disabled-results" class="row"> <section>
<div class="col-md-4"> <h1 id="disabled-results">Disabled results</h1>
<h1>Disabled results</h1>
<p> <p>
Select2 will correctly handled disabled results, both with data coming Select2 will correctly handled disabled results, both with data coming
@ -404,6 +374,7 @@ $(".js-programmatic-disable").on("click", function () {
<code>disabled: true</code> set. <code>disabled: true</code> set.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-disabled-results form-control"> <select class="js-example-disabled-results form-control">
<option value="one">First</option> <option value="one">First</option>
@ -412,8 +383,6 @@ $(".js-programmatic-disable").on("click", function () {
</select> </select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-disabled-results"></pre> <pre data-fill-from=".js-code-disabled-results"></pre>
@ -424,18 +393,17 @@ $(".js-programmatic-disable").on("click", function () {
<option value="three">Third</option> <option value="three">Third</option>
</select> </select>
</script> </script>
</div>
</section> </section>
<section id="programmatic" class="row"> <section>
<div class="col-md-4"> <h1 id="programmatic">Programmatic access</h1>
<h1>Programmatic access</h1>
<p> <p>
Select2 supports methods that allow programmatic control of the Select2 supports methods that allow programmatic control of the
component. component.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-programmatic js-states form-control"></select> <select class="js-example-programmatic js-states form-control"></select>
</p> </p>
@ -468,7 +436,7 @@ $(".js-programmatic-disable").on("click", function () {
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select> <select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
</p> </p>
<div class="btn-group" role="group" aria-label="Programmatic setting and clearing Select2 options"> <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"> <button type="button" class="js-programmatic-multi-set-val btn btn-default">
Set to California and Alabama Set to California and Alabama
</button> </button>
@ -479,9 +447,6 @@ $(".js-programmatic-disable").on("click", function () {
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-programmatic"></pre> <pre data-fill-from=".js-code-programmatic"></pre>
<script type="text/javascript" class="js-code-programmatic"> <script type="text/javascript" class="js-code-programmatic">
@ -499,21 +464,27 @@ $(".js-programmatic-destroy").on("click", function () { $example.select2("destro
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".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"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
</script> </script>
</div>
</section> </section>
<section id="multiple-max" class="row"> <section>
<div class="col-md-4">
<h1>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>
<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> <p>
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select> <select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-multiple-limit"></pre> <pre data-fill-from=".js-code-multiple-limit"></pre>
@ -522,12 +493,11 @@ $(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2 maximumSelectionLength: 2
}); });
</script> </script>
</div>
</section> </section>
<section id="hide-search" class="row"> <section>
<div class="col-md-4"> <h1 id="hide-search">Hiding the search box</h1>
<h1>Hiding the search box</h1>
<p> <p>
Select2 allows you to hide the search box depending on the number of Select2 allows you to hide the search box depending on the number of
@ -535,12 +505,11 @@ $(".js-example-basic-multiple-limit").select2({
<code>Infinity</code> to tell Select2 to never display the search box. <code>Infinity</code> to tell Select2 to never display the search box.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-basic-hide-search js-states form-control"></select> <select class="js-example-basic-hide-search js-states form-control"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-hide-search"></pre> <pre data-fill-from=".js-code-hide-search"></pre>
@ -549,12 +518,11 @@ $(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity minimumResultsForSearch: Infinity
}); });
</script> </script>
</div>
</section> </section>
<section id="events" class="row"> <section>
<div class="col-md-4"> <h1 id="events">Events</h1>
<h1>Events</h1>
<p> <p>
Select2 will trigger some events on the original select element, Select2 will trigger some events on the original select element,
@ -563,14 +531,6 @@ $(".js-example-basic-hide-search").select2({
<a href="options.html#events">on the options page</a>. <a href="options.html#events">on the options page</a>.
</p> </p>
<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>
<p> <p>
<code>change</code> is fired whenever an option is selected or removed. <code>change</code> is fired whenever an option is selected or removed.
</p> </p>
@ -594,11 +554,20 @@ $(".js-example-basic-hide-search").select2({
<code>select2:unselect</code> is fired whenever a result is unselected. <code>select2:unselect</code> is fired whenever a result is unselected.
<code>select2:unselecting</code> is fired before this and can be prevented. <code>select2:unselecting</code> is fired before this and can be prevented.
</p> </p>
</div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<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> <ul class="js-event-log"></ul>
</div>
<pre data-fill-from=".js-code-events"></pre> <pre data-fill-from=".js-code-events"></pre>
@ -632,34 +601,30 @@ function log (name, evt) {
}); });
} }
</script> </script>
</div>
</section> </section>
<section id="tags" class="row"> <section>
<div class="col-md-4"> <h1 id="tags">Tagging support</h1>
<h1>Tagging support</h1>
<p> <p>
Select2 can be used to quickly set up fields used for tagging. Select2 can be used to quickly set up fields used for tagging.
</p> </p>
<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>
<p> <p>
Note that when tagging is enabled the user can select from pre-existing 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 options or create a new tag by picking the first choice, which is what
the user has typed into the search box so far. the user has typed into the search box so far.
</p> </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> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-tags"></pre> <pre data-fill-from=".js-code-tags"></pre>
@ -668,12 +633,11 @@ $(".js-example-tags").select2({
tags: true tags: true
}) })
</script> </script>
</div>
</section> </section>
<section id="tokenizer" class="row"> <section>
<div class="col-md-4"> <h1 id="tokenizer">Automatic tokenization</h1>
<h1>Automatic tokenization</h1>
<p> <p>
Select2 supports ability to add choices automatically as the user is Select2 supports ability to add choices automatically as the user is
@ -681,6 +645,13 @@ $(".js-example-tags").select2({
entering a space or a comma. entering a space or a comma.
</p> </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> <p>
<select class="js-example-tokenizer form-control" multiple="multiple"> <select class="js-example-tokenizer form-control" multiple="multiple">
<option>red</option> <option>red</option>
@ -688,16 +659,7 @@ $(".js-example-tags").select2({
<option>green</option> <option>green</option>
</select> </select>
</p> </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> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-tokenizer"></pre> <pre data-fill-from=".js-code-tokenizer"></pre>
@ -707,22 +669,17 @@ $(".js-example-tokenizer").select2({
tokenSeparators: [',', ' '] tokenSeparators: [',', ' ']
}) })
</script> </script>
</div>
</section> </section>
<section id="matcher" class="row"> <section>
<div class="col-md-4"> <h1 id="matcher">Custom matcher</h1>
<h1>Custom matcher</h1>
<p> <p>
Unlike other dropdowns on this page, this one matches options only if 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: the term appears in the beginning of the string as opposed to anywhere:
</p> </p>
<p>
<select class="js-example-matcher-start js-states form-control"></select>
</p>
<p> <p>
This custom matcher uses a This custom matcher uses a
<a href="options.html#compat-matcher">compatibility module</a> that is <a href="options.html#compat-matcher">compatibility module</a> that is
@ -731,9 +688,12 @@ $(".js-example-tokenizer").select2({
have the option of using a have the option of using a
<a href="options.html#matcher">more complex matcher</a>. <a href="options.html#matcher">more complex matcher</a>.
</p> </p>
<div class="s2-example">
<p>
<select class="js-example-matcher-start js-states form-control"></select>
</p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-matcher-start"></pre> <pre data-fill-from=".js-code-matcher-start"></pre>
@ -752,12 +712,11 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
}) })
}); });
</script> </script>
</div>
</section> </section>
<section id="diacritics" class="row"> <section>
<div class="col-md-4"> <h1 id="diacritics">Diacritics support</h1>
<h1>Diacritics support</h1>
<p> <p>
Select2's default matcher will ignore diacritics, making it easier for Select2's default matcher will ignore diacritics, making it easier for
@ -765,6 +724,7 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
select below. select below.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-diacritics form-control"> <select class="js-example-diacritics form-control">
<option>Aeróbics</option> <option>Aeróbics</option>
@ -780,20 +740,17 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
</select> </select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-diacritics"></pre> <pre data-fill-from=".js-code-diacritics"></pre>
<script type="text/x-example-code" class="js-code-diacritics"> <script type="text/x-example-code" class="js-code-diacritics">
$(".js-example-diacritics").select2(); $(".js-example-diacritics").select2();
</script> </script>
</div>
</section> </section>
<section id="language" class="row"> <section>
<div class="col-md-4"> <h1 id="language">Multiple languages</h1>
<h1>Multiple languages</h1>
<p> <p>
Select2 supports displaying the messages in different languages, as well Select2 supports displaying the messages in different languages, as well
@ -802,19 +759,18 @@ $(".js-example-diacritics").select2();
that can be displayed. that can be displayed.
</p> </p>
<p>
<select class="js-example-language js-states form-control">
</select>
</p>
<p> <p>
The language does not have to be defined when Select2 is being The language does not have to be defined when Select2 is being
initialized, but instead can be defined in the <code>[lang]</code> initialized, but instead can be defined in the <code>[lang]</code>
attribute of any parent elements as <code>[lang="es"]</code>. attribute of any parent elements as <code>[lang="es"]</code>.
</p> </p>
<div class="s2-example">
<p>
<select class="js-example-language js-states form-control">
</select>
</p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-language"></pre> <pre data-fill-from=".js-code-language"></pre>
@ -823,12 +779,11 @@ $(".js-example-language").select2({
language: "es" language: "es"
}); });
</script> </script>
</div>
</section> </section>
<section id="themes" class="row"> <section>
<div class="col-md-4"> <h1 id="themes">Theme support</h1>
<h1>Theme support</h1>
<p> <p>
Select2 supports custom themes using the Select2 supports custom themes using the
@ -836,22 +791,21 @@ $(".js-example-language").select2({
so you can style Select2 to match the rest of your application. so you can style Select2 to match the rest of your application.
</p> </p>
<p>
<select class="js-example-theme-single js-states form-control">
</select>
</p>
<p> <p>
These are using the <code>classic</code> theme, which matches the old These are using the <code>classic</code> theme, which matches the old
look of Select2. look of Select2.
</p> </p>
<div class="s2-example">
<p>
<select class="js-example-theme-single js-states form-control">
</select>
</p>
<p> <p>
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select> <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
</p> </p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-theme"></pre> <pre data-fill-from=".js-code-theme"></pre>
@ -864,28 +818,23 @@ $(".js-example-theme-multiple").select2({
theme: "classic" theme: "classic"
}); });
</script> </script>
</div>
</section> </section>
<section id="rtl" class="row"> <section>
<div class="col-md-4"> <h1 id="rtl">RTL support</h1>
<h1>RTL support</h1>
<p> <p>
Select2 will work on RTL websites if the <code>dir</code> attribute is Select2 will work on RTL websites if the <code>dir</code> attribute is
set on the <code>&lt;select&gt;</code> or any parents of it. set on the <code>&lt;select&gt;</code> or any parents of it. You can also
initialize Select2 with <code>dir: "rtl"</code> set.
</p> </p>
<div class="s2-example">
<p> <p>
<select class="js-example-rtl js-states form-control" dir="rtl"></select> <select class="js-example-rtl js-states form-control" dir="rtl"></select>
</p> </p>
<p>
You can also use initialize Select2 with <code>dir: "rtl"</code> set.
</p>
</div> </div>
<div class="col-md-8">
<h2 class="s2-docs-headline-example">Example code</h2>
<pre data-fill-from=".js-code-rtl"></pre> <pre data-fill-from=".js-code-rtl"></pre>
@ -894,9 +843,14 @@ $(".js-example-rtl").select2({
dir: "rtl" dir: "rtl"
}); });
</script> </script>
</div>
</section> </section>
</div> </div>
<div class="col-md-3" role="complementary">
{% include nav/examples.html %}
</div>
</div>
</div>
<select class="js-source-states" style="display: none;"> <select class="js-source-states" style="display: none;">
<optgroup label="Alaskan/Hawaiian Time Zone"> <optgroup label="Alaskan/Hawaiian Time Zone">