56dbbf8cdb
Now the options are mostly generated by hand before being passed off to jQuery for templating. This fixes much of the speed issues we had when they were entirely being generated through jQuery.
584 lines
15 KiB
HTML
584 lines
15 KiB
HTML
---
|
|
layout: default
|
|
title: Examples - Select2
|
|
slug: examples
|
|
---
|
|
|
|
<script type="text/javascript" src="dist/js/i18n/es.js"></script>
|
|
|
|
<div class="container">
|
|
<section id="basic" class="row">
|
|
<div class="col-md-4">
|
|
<h1>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>
|
|
|
|
<p>
|
|
<select class="js-example-basic-single js-states form-control"></select>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="multiple" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Multiple select boxes</h1>
|
|
|
|
<p>
|
|
<select class="js-states" multiple="multiple"></select>
|
|
</p>
|
|
|
|
<p>
|
|
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<pre data-fill-from=".js-code-multiple"></pre>
|
|
|
|
<script type="text/x-example-code" class="js-code-multiple">
|
|
$(".js-example-basic-multiple").select2();
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="placeholders" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Placeholders</h1>
|
|
|
|
<p>
|
|
A placeholder value can be defined and will be displayed until a selection is made.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-placeholder-single js-states form-control">
|
|
<option></option>
|
|
</select>
|
|
</p>
|
|
|
|
<p>
|
|
This works for multiple select boxes as well.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<pre data-fill-from=".js-code-placeholder"></pre>
|
|
|
|
<script type="text/x-example-code" class="js-code-placeholder">
|
|
$(".js-example-placeholder-single").select2({
|
|
placeholder: "Select a state"
|
|
});
|
|
|
|
$(".js-example-placeholder-multiple").select2({
|
|
placeholder: "Select a state"
|
|
});
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="data-array" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Loading array data</h1>
|
|
|
|
<p>
|
|
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
|
|
option tag for the selected values, similar to how it would be done for
|
|
a standard select.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-data-array-selected form-control">
|
|
<option value="2" selected="selected">duplicate</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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-selected"></select>
|
|
|
|
<select class="js-example-data-array-selected">
|
|
<option value="2" selected="selected">duplicate</option>
|
|
</select>
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="data-ajax" class="row">
|
|
<div class="col-md-12">
|
|
<h1>Loading remote data</h1>
|
|
|
|
<p>
|
|
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-data-ajax form-control"></select>
|
|
</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.
|
|
</p>
|
|
|
|
<script type="text/x-example-code" class="js-code-data-ajax">
|
|
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="disabled-results" class="row">
|
|
<div class="col-md-4">
|
|
<h1>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>
|
|
|
|
<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>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tagss" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Programmatic access</h1>
|
|
|
|
<p>
|
|
Select2 supports methods that allow programmatic control of the
|
|
component.
|
|
</p>
|
|
|
|
<p>
|
|
<button class="js-programmatic-open btn btn-success">
|
|
Open
|
|
</button>
|
|
|
|
<button class="js-programmatic-close btn btn-success">
|
|
Close
|
|
</button>
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-programmatic js-states form-control"></select>
|
|
</p>
|
|
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<pre data-fill-from=".js-code-programmatic"></pre>
|
|
|
|
<script type="text/javascript" class="js-code-programmatic">
|
|
var $example = $(".js-example-programmatic");
|
|
|
|
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
|
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tags" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Tagging support</h1>
|
|
|
|
<p>
|
|
Select2 can be used to quickly set up fields used for tagging.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-tags form-control">
|
|
<option value="one">First</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</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>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="matcher" class="row">
|
|
<div class="col-md-4">
|
|
<h1>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>
|
|
<select class="js-example-matcher-start js-states form-control"></select>
|
|
</p>
|
|
|
|
<p>
|
|
This custom matcher uses a
|
|
<a href="compatibility.html">compatibility module</a> that is only
|
|
bundled in the
|
|
<a href="getting-started#versions">full version of Select2</a>. You also
|
|
have the option of using a
|
|
<a href="options.html#matcher">more complex matcher</a>.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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;
|
|
}
|
|
|
|
$.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
|
$(".js-example-matcher-start").select2({
|
|
matcher: oldMatcher(matchStart)
|
|
})
|
|
});
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="language" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Multiple languages</h1>
|
|
|
|
<p>
|
|
Select2 supports displaying the messages in different languages, as well
|
|
as provding your own
|
|
<a href="options.html#language">custom messages</a>
|
|
that can be displayed.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-language js-states form-control">
|
|
</select>
|
|
</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>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<select class="js-source-states" style="display: none;">
|
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
</optgroup>
|
|
<optgroup label="Pacific Time Zone">
|
|
<option value="CA">California</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="WA">Washington</option>
|
|
</optgroup>
|
|
<optgroup label="Mountain Time Zone">
|
|
<option value="AZ">Arizona</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="WY">Wyoming</option>
|
|
</optgroup>
|
|
<optgroup label="Central Time Zone">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="WI">Wisconsin</option>
|
|
</optgroup>
|
|
<optgroup label="Eastern Time Zone">
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WV">West Virginia</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
<script type="text/javascript">
|
|
var $states = $(".js-source-states");
|
|
var statesOptions = $states.html();
|
|
$states.remove();
|
|
|
|
$(".js-states").append(statesOptions);
|
|
|
|
$("[data-fill-from]").each(function () {
|
|
var $this = $(this);
|
|
|
|
var codeContainer = $this.data("fill-from");
|
|
var $container = $(codeContainer);
|
|
|
|
var code = $.trim($container.html());
|
|
|
|
$this.text(code);
|
|
$this.addClass("prettyprint linenums");
|
|
});
|
|
|
|
prettyPrint();
|
|
|
|
$.fn.select2.amd.require(
|
|
["select2/core", "select2/utils", "select2/compat/matcher"],
|
|
function (Select2, Utils, oldMatcher) {
|
|
var $basicSingle = $(".js-example-basic-single");
|
|
var $basicMultiple = $(".js-example-basic-multiple");
|
|
|
|
var $placeholderSingle = $(".js-example-placeholder-single");
|
|
var $placeholderMultiple = $(".js-example-placeholder-multiple");
|
|
|
|
var $dataArray = $(".js-example-data-array");
|
|
var $dataArraySelected = $(".js-example-data-array-selected");
|
|
|
|
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
|
|
|
var data = [];
|
|
|
|
for (var i = 0; i < 9999; i++) {
|
|
data.push({
|
|
id: i.toString(),
|
|
text: i
|
|
});
|
|
}
|
|
|
|
var $ajax = $(".js-example-data-ajax");
|
|
|
|
var $disabledResults = $(".js-example-disabled-results");
|
|
|
|
var $tags = $(".js-example-tags");
|
|
|
|
var $matcherStart = $('.js-example-matcher-start');
|
|
|
|
var $language = $(".js-example-language");
|
|
|
|
$basicSingle.select2();
|
|
$basicMultiple.select2()
|
|
|
|
$placeholderSingle.select2({
|
|
placeholder: "Select a state"
|
|
});
|
|
|
|
$placeholderMultiple.select2({
|
|
placeholder: "Select a state"
|
|
});
|
|
|
|
$dataArray.select2({
|
|
data: data
|
|
});
|
|
|
|
$dataArraySelected.select2({
|
|
data: data
|
|
});
|
|
|
|
$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 data.items;
|
|
},
|
|
cache: true
|
|
},
|
|
minimumInputLength: 1,
|
|
templateResult: function (repo) {
|
|
var markup = '<div class="clearfix">' +
|
|
'<div class="col-sm-1">' +
|
|
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
|
|
'</div>' +
|
|
'<div clas="col-sm-10">' +
|
|
'<div class="clearfix">' +
|
|
'<div class="col-sm-6">' + repo.full_name + '</div>' +
|
|
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
|
|
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
|
|
'</div>';
|
|
|
|
if (repo.description) {
|
|
markup += '<div>' + repo.description + '</div>';
|
|
}
|
|
|
|
markup += '</div></div>';
|
|
|
|
return markup;
|
|
},
|
|
templateSelection: function (repo) {
|
|
return repo.full_name;
|
|
}
|
|
});
|
|
|
|
$disabledResults.select2();
|
|
|
|
$(".js-example-programmatic").select2();
|
|
|
|
$tags.select2({
|
|
tags: true
|
|
});
|
|
|
|
function matchStart (term, text) {
|
|
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
$matcherStart.select2({
|
|
matcher: oldMatcher(matchStart)
|
|
});
|
|
|
|
$language.select2({
|
|
language: "es"
|
|
});
|
|
});
|
|
</script>
|