f6e211e4
 Administrator
finish work part 1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<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, 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
});
</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>
|
