123 lines
3.7 KiB
HTML
123 lines
3.7 KiB
HTML
<section>
|
|
|
|
<h1 id="data" class="page-header">
|
|
Data sources
|
|
</h1>
|
|
|
|
<p>In addition to handling options from a standard <code><select></code>, Select2 can also retrieve the results from other data sources.</p>
|
|
|
|
<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>
|