664 lines
18 KiB
HTML
664 lines
18 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>
|
|
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();
|
|
|
|
<select class="js-example-basic-multiple" multiple="multiple">
|
|
<option value="AL">Alabama</option>
|
|
...
|
|
<option value="WY">Wyoming</option>
|
|
</select>
|
|
</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/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>
|
|
</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">
|
|
<option value="ivaynberg/select2" selected="selected">ivaynberg/select2</option>
|
|
</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>
|
|
|
|
<button class="js-programmatic-init btn btn-danger">
|
|
Init
|
|
</button>
|
|
|
|
<button class="js-programmatic-destroy btn btn-danger">
|
|
Destroy
|
|
</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"); });
|
|
|
|
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
|
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
|
|
</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="diacritics" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Diacritics support</h1>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<div class="col-md-8">
|
|
<h2>Example code</h2>
|
|
|
|
<pre data-fill-from=".js-code-diacritics"></pre>
|
|
|
|
<script type="text/x-example-code" class="js-code-diacritics">
|
|
$(".js-example-diacritics").select2();
|
|
</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>
|
|
|
|
<section id="themes" class="row">
|
|
<div class="col-md-4">
|
|
<h1>Theme support</h1>
|
|
|
|
<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>
|
|
<select class="js-example-theme-single js-states form-control">
|
|
</select>
|
|
</p>
|
|
|
|
<p>
|
|
These are using the <code>classic</code> theme, which matches the old
|
|
look of Select2.
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-example-theme-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-theme"></pre>
|
|
|
|
<!-- Code is further down the page -->
|
|
</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 $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 $ajax = $(".js-example-data-ajax");
|
|
|
|
var $disabledResults = $(".js-example-disabled-results");
|
|
|
|
var $tags = $(".js-example-tags");
|
|
|
|
var $matcherStart = $('.js-example-matcher-start');
|
|
|
|
var $diacritics = $(".js-example-diacritics");
|
|
var $language = $(".js-example-language");
|
|
|
|
$basicSingle.select2();
|
|
$basicMultiple.select2()
|
|
|
|
$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) {
|
|
if (repo.loading) return repo.text;
|
|
|
|
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 || repo.text;
|
|
}
|
|
});
|
|
|
|
$disabledResults.select2();
|
|
|
|
$(".js-example-programmatic").select2();
|
|
|
|
$tags.select2({
|
|
tags: ['red', 'blue', 'green']
|
|
});
|
|
|
|
function matchStart (term, text) {
|
|
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
$matcherStart.select2({
|
|
matcher: oldMatcher(matchStart)
|
|
});
|
|
|
|
$diacritics.select2();
|
|
|
|
$language.select2({
|
|
language: "es"
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script type="text/javascript" class="js-code-theme">
|
|
$(".js-example-theme-single").select2({
|
|
theme: "classic"
|
|
});
|
|
|
|
$(".js-example-theme-multiple").select2({
|
|
theme: "classic"
|
|
});
|
|
</script>
|