Skip to content

Commit b74a0ae

Browse files
author
Florian Kissling
committed
Move all examples to partials.
1 parent f549930 commit b74a0ae

15 files changed

Lines changed: 834 additions & 835 deletions

‎docs/_includes/examples/basics.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<section>
2+
3+
<h1 id="basic">The basics</h1>
4+
5+
<p>
6+
Select2 can take a regular select box like this...
7+
</p>
8+
9+
<p>
10+
<select class="js-states form-control"></select>
11+
</p>
12+
13+
<p>
14+
and turn it into this...
15+
</p>
16+
17+
<div class="s2-example">
18+
<p>
19+
<select class="js-example-basic-single js-states form-control"></select>
20+
</p>
21+
</div>
22+
23+
<pre class="code" data-fill-from=".js-code-basic"></pre>
24+
25+
<script type="text/x-example-code" class="js-code-basic">
26+
$(document).ready(function() {
27+
$(".js-example-basic-single").select2();
28+
});
29+
30+
<select class="js-example-basic-single">
31+
<option value="AL">Alabama</option>
32+
...
33+
<option value="WY">Wyoming</option>
34+
</select>
35+
</script>
36+
37+
</section>

‎docs/_includes/examples/data.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<section>
2+
3+
<h1 id="data-other" class="page-header">
4+
Other data sources
5+
</h1>
6+
7+
<h2 id="data-array" >Loading array data</h2>
8+
9+
<p>
10+
Select2 provides a way to load the data from a local array.
11+
You can provide initial selections with array data by providing the
12+
option tag for the selected values, similar to how it would be done for
13+
a standard select.
14+
</p>
15+
16+
<div class="s2-example">
17+
<p>
18+
<select class="js-example-data-array form-control"></select>
19+
</p>
20+
<p>
21+
<select class="js-example-data-array-selected form-control">
22+
<option value="2" selected="selected">duplicate</option>
23+
</select>
24+
</p>
25+
</div>
26+
27+
<pre data-fill-from=".js-code-data-array"></pre>
28+
29+
<script type="text/x-example-code" class="js-code-data-array">
30+
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
31+
32+
$(".js-example-data-array").select2({
33+
data: data
34+
})
35+
36+
$(".js-example-data-array-selected").select2({
37+
data: data
38+
})
39+
40+
<select class="js-example-data-array"></select>
41+
42+
<select class="js-example-data-array-selected">
43+
<option value="2" selected="selected">duplicate</option>
44+
</select>
45+
</script>
46+
47+
<h2 id="data-ajax" >Loading remote data</h2>
48+
49+
<p>
50+
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
51+
In this example, we can search for repositories using GitHub's API.
52+
</p>
53+
54+
<p>
55+
<select class="js-example-data-ajax form-control">
56+
<option value="3620194" selected="selected">select2/select2</option>
57+
</select>
58+
</p>
59+
60+
<p>
61+
When using Select2 with remote data, the HTML required for the
62+
<code>select</code> is the same as any other Select2. If you need to
63+
provide default selections, you just need to include an
64+
<code>option</code> for each selection that contains the value and text
65+
that should be displayed.
66+
</p>
67+
68+
<pre data-fill-from=".js-code-data-ajax-html"></pre>
69+
70+
<p>
71+
You can configure how Select2 searches for remote data using the
72+
<code>ajax</code> option. More information on the individual options
73+
that Select2 handles can be found in the
74+
<a href="options.html#ajax">options documentation for <code>ajax</code></a>.
75+
</p>
76+
77+
<pre data-fill-from=".js-code-data-ajax"></pre>
78+
79+
<p>
80+
Select2 will pass any options in the <code>ajax</code> object to
81+
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
82+
function you specify.
83+
</p>
84+
85+
<script type="text/x-example-code" class="js-code-data-ajax">
86+
$(".js-data-example-ajax").select2({
87+
ajax: {
88+
url: "https://api.github.com/search/repositories",
89+
dataType: 'json',
90+
delay: 250,
91+
data: function (params) {
92+
return {
93+
q: params.term, // search term
94+
page: params.page
95+
};
96+
},
97+
processResults: function (data, page) {
98+
// parse the results into the format expected by Select2.
99+
// since we are using custom formatting functions we do not need to
100+
// alter the remote JSON data
101+
return {
102+
results: data.items
103+
};
104+
},
105+
cache: true
106+
},
107+
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
108+
minimumInputLength: 1,
109+
templateResult: formatRepo, // omitted for brevity, see the source of this page
110+
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
111+
});
112+
</script>
113+
114+
<script type="text/x-example-code" class="js-code-data-ajax-html">
115+
<select class="js-data-example-ajax">
116+
<option value="3620194" selected="selected">select2/select2</option>
117+
</select>
118+
</script>
119+
120+
</section>

‎docs/_includes/examples/disabled-mode.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<section>
2+
3+
<h1 id="disabled">Disabled mode</h1>
4+
5+
<p>
6+
Select2 will response the <code>disabled</code> attribute on
7+
<code>&lt;select&gt;</code> elements. You can also initialize Select2
8+
with <code>disabled: true</code> to get the same effect.
9+
</p>
10+
11+
<div class="s2-example">
12+
<p>
13+
<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
14+
</p>
15+
16+
<p>
17+
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
18+
</p>
19+
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
20+
<button type="button" class="js-programmatic-enable btn btn-default">
21+
Enable
22+
</button>
23+
<button type="button" class="js-programmatic-disable btn btn-default">
24+
Disable
25+
</button>
26+
</div>
27+
</div>
28+
29+
<pre data-fill-from=".js-code-disabled"></pre>
30+
31+
<script type="text/javascript" class="js-code-disabled">
32+
$(".js-programmatic-enable").on("click", function () {
33+
$(".js-example-disabled").prop("disabled", false);
34+
$(".js-example-disabled-multi").prop("disabled", false);
35+
});
36+
37+
$(".js-programmatic-disable").on("click", function () {
38+
$(".js-example-disabled").prop("disabled", true);
39+
$(".js-example-disabled-multi").prop("disabled", true);
40+
});
41+
</script>
42+
43+
</section>

‎docs/_includes/examples/disabled-results.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<section>
2+
3+
<h1 id="disabled-results">Disabled results</h1>
4+
5+
<p>
6+
Select2 will correctly handled disabled results, both with data coming
7+
from a standard select (when the <code>disabled</code> attribute is set)
8+
and from remote sources, where the object has
9+
<code>disabled: true</code> set.
10+
</p>
11+
12+
<div class="s2-example">
13+
<p>
14+
<select class="js-example-disabled-results form-control">
15+
<option value="one">First</option>
16+
<option value="two" disabled="disabled">Second (disabled)</option>
17+
<option value="three">Third</option>
18+
</select>
19+
</p>
20+
</div>
21+
22+
<pre data-fill-from=".js-code-disabled-results"></pre>
23+
24+
<script type="text/x-example-code" class="js-code-disabled-results">
25+
<select class="js-example-disabled-results">
26+
<option value="one">First</option>
27+
<option value="two" disabled="disabled">Second (disabled)</option>
28+
<option value="three">Third</option>
29+
</select>
30+
</script>
31+
32+
</section>

‎docs/_includes/examples/hide-search.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<section>
2+
3+
<h1 id="hide-search">Hiding the search box</h1>
4+
5+
<p>
6+
Select2 allows you to hide the search box depending on the number of
7+
options which are displayed. In this example, we use the value
8+
<code>Infinity</code> to tell Select2 to never display the search box.
9+
</p>
10+
11+
<div class="s2-example">
12+
<p>
13+
<select class="js-example-basic-hide-search js-states form-control"></select>
14+
</p>
15+
</div>
16+
17+
<pre data-fill-from=".js-code-hide-search"></pre>
18+
19+
<script type="text/x-example-code" class="js-code-hide-search">
20+
$(".js-example-basic-hide-search").select2({
21+
minimumResultsForSearch: Infinity
22+
});
23+
</script>
24+
25+
</section>

‎docs/_includes/examples/localization-rtl-diacritics.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<section>
2+
3+
<h1 id="localization-rtl-diacritics" class="page-header">
4+
Localization, RTL and diacritics support
5+
</h1>
6+
7+
<h2 id="language">Multiple languages</h2>
8+
9+
<p>
10+
Select2 supports displaying the messages in different languages, as well
11+
as providing your own
12+
<a href="options.html#language">custom messages</a>
13+
that can be displayed.
14+
</p>
15+
16+
<p>
17+
The language does not have to be defined when Select2 is being
18+
initialized, but instead can be defined in the <code>[lang]</code>
19+
attribute of any parent elements as <code>[lang="es"]</code>.
20+
</p>
21+
22+
<div class="s2-example">
23+
<p>
24+
<select class="js-example-language js-states form-control">
25+
</select>
26+
</p>
27+
</div>
28+
29+
<pre data-fill-from=".js-code-language"></pre>
30+
31+
<script type="text/x-example-code" class="js-code-language">
32+
$(".js-example-language").select2({
33+
language: "es"
34+
});
35+
</script>
36+
37+
<h2 id="rtl">RTL support</h2>
38+
39+
<p>
40+
Select2 will work on RTL websites if the <code>dir</code> attribute is
41+
set on the <code>&lt;select&gt;</code> or any parents of it. You can also
42+
initialize Select2 with <code>dir: "rtl"</code> set.
43+
</p>
44+
45+
<div class="s2-example">
46+
<p>
47+
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
48+
</p>
49+
</div>
50+
51+
<pre data-fill-from=".js-code-rtl"></pre>
52+
53+
<script type="text/x-example-code" class="js-code-rtl">
54+
$(".js-example-rtl").select2({
55+
dir: "rtl"
56+
});
57+
</script>
58+
59+
<h2 id="diacritics">Diacritics support</h2>
60+
61+
<p>
62+
Select2's default matcher will ignore diacritics, making it easier for
63+
users to filter results in international selects. Type "aero" into the
64+
select below.
65+
</p>
66+
67+
<div class="s2-example">
68+
<p>
69+
<select class="js-example-diacritics form-control">
70+
<option>Aeróbics</option>
71+
<option>Aeróbics en Agua</option>
72+
<option>Aerografía</option>
73+
<option>Aeromodelaje</option>
74+
<option>Águilas</option>
75+
<option>Ajedrez</option>
76+
<option>Ala Delta</option>
77+
<option>Álbumes de Música</option>
78+
<option>Alusivos</option>
79+
<option>Análisis de Escritura a Mano</option>
80+
</select>
81+
</p>
82+
</div>
83+
84+
<pre data-fill-from=".js-code-diacritics"></pre>
85+
86+
<script type="text/x-example-code" class="js-code-diacritics">
87+
$(".js-example-diacritics").select2();
88+
</script>
89+
90+
</section>

‎docs/_includes/examples/matcher.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<section>
2+
3+
<h1 id="matcher">Custom matcher</h1>
4+
5+
<p>
6+
Unlike other dropdowns on this page, this one matches options only if
7+
the term appears in the beginning of the string as opposed to anywhere:
8+
</p>
9+
10+
<p>
11+
This custom matcher uses a
12+
<a href="options.html#compat-matcher">compatibility module</a> that is
13+
only bundled in the
14+
<a href="index.html#builds-full">full version of Select2</a>. You also
15+
have the option of using a
16+
<a href="options.html#matcher">more complex matcher</a>.
17+
</p>
18+
19+
<div class="s2-example">
20+
<p>
21+
<select class="js-example-matcher-start js-states form-control"></select>
22+
</p>
23+
</div>
24+
25+
<pre data-fill-from=".js-code-matcher-start"></pre>
26+
27+
<script type="text/x-example-code" class="js-code-matcher-start">
28+
function matchStart (term, text) {
29+
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
30+
return true;
31+
}
32+
33+
return false;
34+
}
35+
36+
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
37+
$(".js-example-matcher-start").select2({
38+
matcher: oldMatcher(matchStart)
39+
})
40+
});
41+
</script>
42+
43+
</section>

0 commit comments

Comments
 (0)