74387b9863
This fixes some bugs that were present in the old Prettify highlighter when there was a mix of JavaScript and HTML in the same code block. Now with Rouge, the highlighter used by Jekyll, these cases are properly handled and HTML no longer looks strange. This does not convert all of the code blocks over, because there are still some code blocks which double as the actual JavaScript code powering the example that need to be migrated.
124 lines
3.7 KiB
HTML
124 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>
|
|
|
|
{% highlight html linenos %}
|
|
<script type="text/javascript">
|
|
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
|
|
})
|
|
</script>
|
|
|
|
<select class="js-example-data-array"></select>
|
|
|
|
<select class="js-example-data-array-selected">
|
|
<option value="2" selected="selected">duplicate</option>
|
|
</select>
|
|
{% endhighlight %}
|
|
|
|
<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>
|
|
|
|
{% highlight html linenos %}
|
|
<select class="js-data-example-ajax">
|
|
<option value="3620194" selected="selected">select2/select2</option>
|
|
</select>
|
|
{% endhighlight %}
|
|
|
|
<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>
|
|
|
|
{% highlight js linenos %}
|
|
$(".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, params) {
|
|
// 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, except to indicate that infinite
|
|
// scrolling can be used
|
|
params.page = params.page || 1;
|
|
|
|
return {
|
|
results: data.items,
|
|
pagination: {
|
|
more: (params.page * 30) < data.total_count
|
|
}
|
|
};
|
|
},
|
|
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
|
|
});
|
|
{% endhighlight %}
|
|
|
|
<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>
|
|
</section>
|