RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

Answers to some of the questions

Browse Source
This commit is contained in:
Kevin Brown 2015-09-09 12:30:12 -04:00
parent a96ec9d91c
commit c502961149
6 changed files with 206 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/_includes/options-new/core/amd-support.html
View File

@ -2,12 +2,33 @@
<h2 id="amd">
Can I use Select2 with my AMD or CommonJS loader?
</h2>
<p>
Yes, Select2 should work with most AMD or CommonJS loaders without any issues.
</p>
<h3>
How do I tell Select2 where to look for modules?
</h3>
<p>
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.
</p>
<p>
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.
</p>
<pre class="prettyprint">
$.fn.select2.defaults.set('amdBase', 'select2/');
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
</pre>
<h3>
Select2 is being placed before jQuery in my JavaScript file
</h3>
<p>
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.
</p>
</section>

37
docs/_includes/options-new/core/options.html
View File

@ -7,6 +7,35 @@
Can default options be set for all dropdowns?
</h3>
<p>
In some cases, you need to set the default options for all instances of
Select2 in your web application. This is especially useful when you are
migrating from past versions of Select2, or you are using non-standard
options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
default options through <code>$.fn.select2.defaults</code>, which allows
you to set them globally.
</p>
<p>
When setting options globally, any past defaults that have been set will
be overriden. Default options are only used when an option is requested
that has not been set during initialization.
</p>
<p>
<strong>You can set default options</strong> by calling
<code>$.fn.select2.defaults.set("key", "value")</code>. The key that is
set should take the same format as keys set using
<a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
means that two dashes (<code>--</code>) will be replaced by a level of
nesting, and a single dash (<code>-</code>) will convert it to a camelCase
string.
</p>
<pre class="prettyprint">
$.fn.select2.defaults.set("theme", "classic");
</pre>
<h3>
How can I set a default value for a nested option?
</h3>
@ -14,4 +43,12 @@
<h3>
How can I reset all of the global default options?
</h3>
<p>
You can reset the default options by calling
</p>
<pre class="prettyprint">
$.fn.select2.defaults.reset();
</pre>
</section>

78
docs/_includes/options-new/data/ajax.html
View File

@ -3,10 +3,18 @@
Can Select2 be connected to a remote data source?
</h2>
<p>
Select2 supports connecting to a remote data source using the <code>ajax</code> option.
</p>
<h3>
How can I set the initially selected options when using AJAX?
</h3>
<p>
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>
</p>
<h3>
What should the results returned to Select2 look like?
</h3>
@ -15,15 +23,85 @@
Is there a way to modify the response before passing it back to Select2?
</h3>
<p>
You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2.
</p>
<pre class="prettyprint">
$('select').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
return {
results: data.items
};
}
}
});
</pre>
<h3>
A request is being triggered on every key stroke, can I delay this?
</h3>
<p>
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.
</p>
<pre class="prettyprint">
$('select').select2({
ajax: {
url: '/example/api',
delay: 250
}
});
</pre>
<p>
This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
</p>
<h3>
I want to add more query parameters to the request, where can this be done?
</h3>
<p>
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.
</p>
<pre class="prettyprint">
$('select').select2({
ajax: {
data: function (params) {
var query = {
search: params.term,
page: params.page
}
// Query paramters will be ?search=[term]&page=[page]
return query;
}
}
});
</pre>
<h3>
Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
</h3>
<p>
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.
</p>
<pre class="prettyprint">
$('select').select2({
ajax: {
transport: function (params, success, failure) {
var request = new AjaxRequest(params.url, params);
request.on('success', success);
request.on('failure', failure);
}
}
});
</pre>
</section>

32
docs/_includes/options-new/data/array.html
View File

@ -2,36 +2,52 @@
<h2 id="data">
Can I load data into Select2 using an array?
</h2>
<p>
Yes, but only when you are initially creating it.
</p>
<h3>
What properties are required on the objects passed in to the array?
</h3>
<p>
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.
</p>
<h3>
How should nested results be formatted?
</h3>
<h3>
How many levels of nesting are allowed?
</h3>
<p>
Because Select2 falls back to an <code>&lt;optgroup&gt;</code> when creating nested options, only a single level of nesting can be supported.
</p>
<h3>
Why are <code>&lt;option&gt;</code> tags being created?
</h3>
<p>
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.
</p>
<h3>
My objects don&apos;t use <code>id</code> for their unique identifiers, what can I do?
</h3>
<p>
You can re-map your identifier before passing it to Select2.
</p>
<h3>
My objects use a property other than <code>text</code> for the text that needs to be displayed
</h3>
<p>
These can also be re-mapped.
</p>
</section>

12
docs/_includes/options-new/selections/multiple.html
View File

@ -2,4 +2,16 @@
<h2 id="multiple">
Can I allow users to make multiple selections?
</h2>
<p>
Yes, Select2 supports making multiple selections through the use of the <code>multiple</code> option that can be passed in when initializing Select2.
</p>
<h3>
Can the <code>multiple</code> attribute be used on my <code>&lt;select&gt;</code> element?
</h3>
<p>
Yes, Select2 will automatically map the value of the <code>multiple</code> attribute to the <code>multiple</code> option during initialization.
</p>
</section>

40
docs/_includes/options-new/selections/placeholder.html
View File

@ -2,28 +2,52 @@
<h2 id="placeholder">
How can I have Select2 display a placeholder?
</h2>
<p>
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.
</p>
<h3>
My first option is being displayed instead of my placeholder
</h3>
<p>
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>.
</p>
<p>
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.
</p>
<h3>
I am using AJAX, can I still show a placeholder?
</h3>
<p>
Yes, Select2 supports placeholders for all configurations. You will still need to add in the placeholder option if you are using a single select.
</p>
<h3>
Can I use a placeholder without a blank value?
Can I use an option without a blank value as my placeholder?
</h3>
<p>
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.
</p>
<h3>
Can I change how the placeholder looks?
</h3>
<p>
The placeholder option should go through the standard templating methods, including <code>templateSelection</code>, so you can change how it is displayed.
</p>
<h3>
My placeholders aren&apos;t being displayed in Internet Explorer
</h3>
<p>
You need to include Placeholders.js on your page, or use the full build.
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.
</p>
</section>