Skip to content

Commit c502961

Browse files
kevin-brownkevin-brown
committed
Answers to some of the questions
1 parent a96ec9d commit c502961

6 files changed

Lines changed: 206 additions & 18 deletions

File tree

‎docs/_includes/options-new/core/amd-support.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,33 @@
22
<h2 id="amd">
33
Can I use Select2 with my AMD or CommonJS loader?
44
</h2>
5-
5+
6+
<p>
7+
Yes, Select2 should work with most AMD or CommonJS loaders without any issues.
8+
</p>
9+
610
<h3>
711
How do I tell Select2 where to look for modules?
812
</h3>
9-
13+
14+
<p>
15+
For most AMD and CommonJS setups, the location of the data files used by Select2 will be automatically determined and handled without you needing to do anything.
16+
</p>
17+
18+
<p>
19+
If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional dependencies or language files. You can manually set the prefixes to use for these files using the <code>amdBase</code> and <code>amdLanugageBase</code> options.
20+
</p>
21+
22+
<pre class="prettyprint">
23+
$.fn.select2.defaults.set('amdBase', 'select2/');
24+
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
25+
</pre>
26+
1027
<h3>
1128
Select2 is being placed before jQuery in my JavaScript file
1229
</h3>
30+
31+
<p>
32+
Due to a bug in older versions of the r.js build tool, Select2 was sometimes placed before jQuery in then compiled build file. Because of this, Select2 will trigger an error because it won't be able to find or load jQuery.
33+
</p>
1334
</section>

‎docs/_includes/options-new/core/options.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,48 @@ <h3>
77
Can default options be set for all dropdowns?
88
</h3>
99

10+
<p>
11+
In some cases, you need to set the default options for all instances of
12+
Select2 in your web application. This is especially useful when you are
13+
migrating from past versions of Select2, or you are using non-standard
14+
options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
15+
default options through <code>$.fn.select2.defaults</code>, which allows
16+
you to set them globally.
17+
</p>
18+
19+
<p>
20+
When setting options globally, any past defaults that have been set will
21+
be overriden. Default options are only used when an option is requested
22+
that has not been set during initialization.
23+
</p>
24+
25+
<p>
26+
<strong>You can set default options</strong> by calling
27+
<code>$.fn.select2.defaults.set("key", "value")</code>. The key that is
28+
set should take the same format as keys set using
29+
<a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
30+
means that two dashes (<code>--</code>) will be replaced by a level of
31+
nesting, and a single dash (<code>-</code>) will convert it to a camelCase
32+
string.
33+
</p>
34+
35+
<pre class="prettyprint">
36+
$.fn.select2.defaults.set("theme", "classic");
37+
</pre>
38+
1039
<h3>
1140
How can I set a default value for a nested option?
1241
</h3>
1342

1443
<h3>
1544
How can I reset all of the global default options?
1645
</h3>
46+
47+
<p>
48+
You can reset the default options by calling
49+
</p>
50+
51+
<pre class="prettyprint">
52+
$.fn.select2.defaults.reset();
53+
</pre>
1754
</section>

‎docs/_includes/options-new/data/ajax.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@ <h2 id="ajax">
33
Can Select2 be connected to a remote data source?
44
</h2>
55

6+
<p>
7+
Select2 supports connecting to a remote data source using the <code>ajax</code> option.
8+
</p>
9+
610
<h3>
711
How can I set the initially selected options when using AJAX?
812
</h3>
913

14+
<p>
15+
You can refer to the following Stack Overflow answer if you want to set the initial value for AJAX requests: <a href="http://stackoverflow.com/q/30316586/359284#30328989">Select2 4.0.0 initial value with AJAX</a>
16+
</p>
17+
1018
<h3>
1119
What should the results returned to Select2 look like?
1220
</h3>
@@ -15,15 +23,85 @@ <h3>
1523
Is there a way to modify the response before passing it back to Select2?
1624
</h3>
1725

26+
<p>
27+
You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2.
28+
</p>
29+
30+
<pre class="prettyprint">
31+
$('select').select2({
32+
ajax: {
33+
url: '/example/api',
34+
processResults: function (data) {
35+
return {
36+
results: data.items
37+
};
38+
}
39+
}
40+
});
41+
</pre>
42+
1843
<h3>
1944
A request is being triggered on every key stroke, can I delay this?
2045
</h3>
2146

47+
<p>
48+
By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the <code>ajax.delay</code> option.
49+
</p>
50+
51+
<pre class="prettyprint">
52+
$('select').select2({
53+
ajax: {
54+
url: '/example/api',
55+
delay: 250
56+
}
57+
});
58+
</pre>
59+
60+
<p>
61+
This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
62+
</p>
63+
2264
<h3>
2365
I want to add more query parameters to the request, where can this be done?
2466
</h3>
2567

68+
<p>
69+
By default, Select2 will send the query term as well as the pagination data as query parameters in requests. You can override the data that is sent to your API, or change any of the query paramters, by overriding the <code>ajax.data</codE> option.
70+
</p>
71+
72+
<pre class="prettyprint">
73+
$('select').select2({
74+
ajax: {
75+
data: function (params) {
76+
var query = {
77+
search: params.term,
78+
page: params.page
79+
}
80+
81+
// Query paramters will be ?search=[term]&page=[page]
82+
return query;
83+
}
84+
}
85+
});
86+
</pre>
87+
2688
<h3>
2789
Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
2890
</h3>
91+
92+
<p>
93+
Select2 uses the transport method defined in <code>ajax.transport</code> to send requests to your API. By default, this transport method is <code>jQuery.ajax</code> but this can be changed.
94+
</p>
95+
96+
<pre class="prettyprint">
97+
$('select').select2({
98+
ajax: {
99+
transport: function (params, success, failure) {
100+
var request = new AjaxRequest(params.url, params);
101+
request.on('success', success);
102+
request.on('failure', failure);
103+
}
104+
}
105+
});
106+
</pre>
29107
</section>

‎docs/_includes/options-new/data/array.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,52 @@
22
<h2 id="data">
33
Can I load data into Select2 using an array?
44
</h2>
5-
5+
66
<p>
77
Yes, but only when you are initially creating it.
88
</p>
9-
9+
1010
<h3>
1111
What properties are required on the objects passed in to the array?
1212
</h3>
13-
13+
14+
<p>
15+
The <code>id</code> and <code>text</code> properties are required on each object, and these are the properties that Select2 uses for the internal data objects. Any additional paramters passed in with data objects will be included on the data objects that Select2 exposes.
16+
</p>
17+
1418
<h3>
1519
How should nested results be formatted?
1620
</h3>
17-
21+
1822
<h3>
1923
How many levels of nesting are allowed?
2024
</h3>
21-
25+
26+
<p>
27+
Because Select2 falls back to an <code>&lt;optgroup&gt;</code> when creating nested options, only a single level of nesting can be supported.
28+
</p>
29+
2230
<h3>
2331
Why are <code>&lt;option&gt;</code> tags being created?
2432
</h3>
25-
33+
2634
<p>
2735
The <code>data</code> option is a shortcut that Select2 provides which allows you to load options into your <code>select</code> from a data array.
2836
</p>
29-
37+
3038
<h3>
3139
My objects don&apos;t use <code>id</code> for their unique identifiers, what can I do?
3240
</h3>
33-
41+
42+
<p>
43+
You can re-map your identifier before passing it to Select2.
44+
</p>
45+
3446
<h3>
3547
My objects use a property other than <code>text</code> for the text that needs to be displayed
3648
</h3>
49+
50+
<p>
51+
These can also be re-mapped.
52+
</p>
3753
</section>

‎docs/_includes/options-new/selections/multiple.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,16 @@
22
<h2 id="multiple">
33
Can I allow users to make multiple selections?
44
</h2>
5+
6+
<p>
7+
Yes, Select2 supports making multiple selections through the use of the <code>multiple</code> option that can be passed in when initializing Select2.
8+
</p>
9+
10+
<h3>
11+
Can the <code>multiple</code> attribute be used on my <code>&lt;select&gt;</code> element?
12+
</h3>
13+
14+
<p>
15+
Yes, Select2 will automatically map the value of the <code>multiple</code> attribute to the <code>multiple</code> option during initialization.
16+
</p>
517
</section>

‎docs/_includes/options-new/selections/placeholder.html‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,52 @@
22
<h2 id="placeholder">
33
How can I have Select2 display a placeholder?
44
</h2>
5-
5+
6+
<p>
7+
Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
8+
</p>
9+
610
<h3>
711
My first option is being displayed instead of my placeholder
812
</h3>
9-
13+
14+
<p>
15+
This usually means that you do not have a blank <code>&lt;option&gt;&lt/option&gt;</code> as the first option in your <code>&lt;select&gt;</code>.
16+
</p>
17+
18+
<p>
19+
Note that this does not apply to multiple selects, as the browser does not select the first option by default when multiple selections can be made.
20+
</p>
21+
1022
<h3>
1123
I am using AJAX, can I still show a placeholder?
1224
</h3>
13-
25+
26+
<p>
27+
Yes, Select2 supports placeholders for all configurations. You will still need to add in the placeholder option if you are using a single select.
28+
</p>
29+
1430
<h3>
15-
Can I use a placeholder without a blank value?
31+
Can I use an option without a blank value as my placeholder?
1632
</h3>
17-
33+
34+
<p>
35+
The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option.
36+
</p>
37+
1838
<h3>
1939
Can I change how the placeholder looks?
2040
</h3>
21-
41+
42+
<p>
43+
The placeholder option should go through the standard templating methods, including <code>templateSelection</code>, so you can change how it is displayed.
44+
</p>
45+
2246
<h3>
2347
My placeholders aren&apos;t being displayed in Internet Explorer
2448
</h3>
25-
49+
2650
<p>
27-
You need to include Placeholders.js on your page, or use the full build.
51+
Select2 uses the native <code>placeholder</code> attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include Placeholders.js on your page, or use the full build, in order to add <code>placeholder</code> attribute support to input boxes.
2852
</p>
2953
</section>

0 commit comments

Comments
 (0)