1
0
mirror of https://gitlab.com/JKANetwork/CheckServer.git synced 2026-03-02 17:03:45 +01:00

Start again

This commit is contained in:
2020-10-04 17:14:00 +02:00
parent c0d3912413
commit 091f119048
4382 changed files with 1762543 additions and 9606 deletions

View File

@@ -0,0 +1,10 @@
<section>
<h1>
Backwards compatibility
</h1>
{% include options/compatibility/matcher.html %}
{% include options/compatibility/initial-selection.html %}
{% include options/compatibility/query-function.html %}
{% include options/compatibility/text-input.html %}
</section>

View File

@@ -0,0 +1,50 @@
<section>
<h2 id="initSelection">
Old initial selections with <code>initSelection</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#removed-initselection" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 required an option called <code>initSelection</code>
that was defined whenever a custom data source was being used, allowing
for the initial selection for the component to be determined. This has
been replaced by the <code>current</code> method on the
<a href="#dataAdapter">data adapter</a>.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>initSelection</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a <code>callback</code>
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/initSelection">InitSelection</code>
</dd>
</dl>
</div>
</div>
</section>

View File

@@ -0,0 +1,18 @@
<section>
<p>
Select2 offers limited backwards compatibility with the previously 3.5.x
release line, allowing people more efficiently transfer across releases
and get the latest features. For many of the larger changes, such as the
change in how custom data adapters work, compatibility modules were
created that will be used to assist in the upgrade process. It is not
recommended to rely on these compatibility modules, as they will not
always exist, but they make upgrading easier for major changes.
</p>
<p>
<strong>The compatibility modules are only included in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2</strong>. These files end in <code>.full.js</code>, and the
compatibility modules are prefixed with <code>select2/compat</code>.
</p>
</section>

View File

@@ -0,0 +1,50 @@
<section>
<h2 id="compat-matcher">
Simplified function for matching data objects
</h2>
<p class="alert alert-info">
<a href="announcements-4.0.html#new-matcher" class="alert-link">Added in Select2 4.0.0.</a>
This method was added to make upgrading easier from earlier versions of
Select2.
</p>
<p>
During the <a href="announcements-4.0.html">Select2 4.0.0 release</a>, the
<code>matcher</code> function was changed to allow for more complex
matching of nested objects.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>matcher</code>
</dd>
<dt>Value</dt>
<dd>
A function taking a search <code>term</code> and the data object
<code>text</code>.
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/compat/matcher">oldMatcher</code>
</dd>
</dl>
</div>
</div>
<p>
The <a href="examples.html#matcher">custom matcher example</a> provides a
guide for how to use this in your own application. For those upgrading
from older versions of Select2, you just need to wrap your old
<code>matcher</code> with this function to maintain compatibility.
</p>
</section>

View File

@@ -0,0 +1,50 @@
<section>
<h2 id="query">
Querying old data with <code>query</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#query-to-data-adapter" class="alert-link">Deprecated in Select2 4.0.</a>
This has been replaced by another option and is only available in the
<a href="index.html#builds-full" class="alert-link">full builds</a> of
Select2.
</p>
<p>
In the past, Select2 supported an option called <code>query</code> that
allowed for a custom data source to be used. This option has been replaced
by the <code>query</code> method on the
<a href="#dataAdapter">data adapter</a> and takes a very similar set of
parameters.
</p>
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Key</dt>
<dd>
<code>query</code>
</dd>
<dt>Value</dt>
<dd>
A function taking <code>params</code> (including a <code>callback</code>)
</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/query">Query</code>
</dd>
</dl>
</div>
</div>
</section>

View File

@@ -0,0 +1,32 @@
<section>
<h2 id="input-fallback">
Compatibility with <code>&lt;input type="text" /&gt;</code>
</h2>
<p class="alert alert-warning">
<a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
</p>
<p>
In past versions of Select2, a <code>&lt;select&gt;</code> element could
only be used with a limited subset of options. An
<code>&lt;input type="hidden" /&gt;</code> was required instead, which did
not allow for a graceful fallback for users who did not have JavaScript
enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
all options, so it is no longer required to use <code>&lt;input /&gt;</code>
elements with Select2.
</p>
<dl class="dl-horizontal">
<dt>Adapter</dt>
<dd>
<code title="select2/data/base">DataAdapter</code>
</dd>
<dt>Decorator</dt>
<dd>
<code title="select2/compat/inputData">InputData</code>
</dd>
</dl>
</section>

View File

@@ -0,0 +1,9 @@
<section>
<h1>
Core options
</h1>
{% include options/core/options.html %}
{% include options/core/data-attributes.html %}
{% include options/core/amd-support.html %}
</section>

View File

@@ -0,0 +1,46 @@
<section>
<h2 id="amd">
Can I use Select2 with my AMD or CommonJS loader?
</h2>
<p>
Select2 should work with most AMD- or CommonJS-compliant module loaders, including <a href="http://requirejs.org/">RequireJS</a> and <a href="https://github.com/jrburke/almond">almond</a>. Select2 ships with a modified version of the <a href="https://github.com/umdjs/umd/blob/f208d385768ed30cd0025d5415997075345cd1c0/templates/jqueryPlugin.js">UMD jQuery template</a> that supports both CommonJS and AMD environments.
</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>
{% highlight js linenos %}
$.fn.select2.defaults.set('amdBase', 'select2/');
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
{% endhighlight %}
<h3>
Select2 is being placed before jQuery in my JavaScript file
</h3>
<p>
Due to <a href="https://github.com/jrburke/requirejs/issues/1342">a bug in older versions</a> 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>
<p>
By upgrading to version 2.1.18 or higher of the r.js build tool, you will be able to fix the issue.
</p>
<h3>
Should I point to the files in <code>dist</code> or <code>src</code>?
</h3>
<p>
Select2 internally uses AMD and the r.js build tool to build the files located in the <code>dist</code> folder. These are built using the files in the <code>src</code> folder, so <em>you can</em> just point your modules to the Select2 source and load in <code>jquery.select2</code> or <code>select2/core</code> when you want to use Select2. The files located in the <code>dist</code> folder are also AMD-compatible, so you can point to that file if you want to load in all of the default Select2 modules.
</p>
</section>

View File

@@ -0,0 +1,76 @@
<section>
<h2 id="data-attributes">
Can I declare my configuration within the HTML?
</h2>
<p>
It is recommended that you declare your configuration options for Select2
when initializing Select2. You can also define your configuration options
by using the HTML5 <code>data-*</code> attributes, which will override
any options set when initializing Select2 and any defaults.
</p>
<h3>
How should <code>camelCase</code> options be written?
</h3>
<p>
HTML data attributes are case-insensitive, so any options which contain capital letters will be parsed as if they were all lowercase. Because Select2 has many options which are camelCase, where words are separated by uppercase letters, you must write these options out with dashes instead. So an option that would normally be called <code>allowClear</code> should instead be defined as <code>allow-clear</code>.
</p>
<p>
This means that if you declare your <code>&lt;select&gt;</code> tag as...
</p>
{% highlight html linenos %}
<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
{% endhighlight %}
<p>
Will be interpreted the same as initializing Select2 as...
</p>
{% highlight js linenos %}
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true
});
{% endhighlight %}
<h3>
Are options with nested configurations supported?
</h3>
<p>
You can also define nested configurations, which are typically needed for
options such as AJAX. Each level of nesting should be separated by two
dashes (<code>--</code>) instead of one. Due to
<a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
nested options using <code>data-*</code> attributes
<a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
</p>
{% highlight html linenos %}
<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
{% endhighlight %}
<p>
Which will be interpreted the same as initializing Select2 with...
</p>
{% highlight js linenos %}
$("select").select2({
ajax: {
url: "http://example.org/api/test",
cache: true
}
});
{% endhighlight %}
<p>
The value of the option is subject to jQuery's
<a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
HTML5 data attributes.
</p>
</section>

View File

@@ -0,0 +1,80 @@
<section>
<h2 id="options">
How should Select2 be initialized?
</h2>
<p>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2.
</p>
{% highlight js linenos %}
$('select').select2();
{% endhighlight %}
<p>
You can optionally pass an object containing all of the options that you would like to initialize Select2 with.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: 'Select an option'
});
{% endhighlight %}
<h3 id="setting-default-options">
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>.
</p>
{% highlight js linenos %}
$.fn.select2.defaults.set("theme", "classic");
{% endhighlight %}
<h3>
How can I set a default value for a nested option?
</h3>
<p>
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>
{% highlight js linenos %}
$.fn.select2.defaults.set("ajax--cache", false);
{% endhighlight %}
<h3>
How can I reset all of the global default options?
</h3>
<p>
You can reset the default options to their initial values by calling
</p>
{% highlight js linenos %}
$.fn.select2.defaults.reset();
{% endhighlight %}
</section>

View File

@@ -0,0 +1,9 @@
<section>
<h1>
Data adapters
</h1>
{% include options/data/select.html %}
{% include options/data/array.html %}
{% include options/data/ajax.html %}
</section>

View File

@@ -0,0 +1,147 @@
<section>
<h2 id="ajax">
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>
{% include options/not-written.html %}
<h3>
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>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
return {
results: data.items
};
}
}
});
{% endhighlight %}
<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>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/example/api',
delay: 250
}
});
{% endhighlight %}
<p>
This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
</p>
<h3>
How do I tell Select2 which URL to get the results from?
</h3>
<p>
When connecting Select2 to a remote data source, you have the option of using either a single endpoint (a single page which handles all requests) or a dynamic endpoint (one of many pages). You can point Select2 to a single endpoint during initialization by specifying a string for the <code>ajax.url</code> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: '/path/to/search/endpoint'
}
});
{% endhighlight %}
<p>
If there isn't a single url for your search results, or you need to call a function to determine the url to use, you can specify a function for the <code>ajax.url</code> option, and this will be used instead. The query parameters will be passed in through the <code>params</code> option.
</p>
{% highlight js linenos %}
$('select').select2({
ajax: {
url: function (params) {
return '/some/url/' + params.term;
}
}
});
{% endhighlight %}
<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>
{% highlight js linenos %}
$('select').select2({
ajax: {
data: function (params) {
var query = {
search: params.term,
page: params.page
}
// Query paramters will be ?search=[term]&page=[page]
return query;
}
}
});
{% endhighlight %}
<h3>
The results that I am seeing never change
</h3>
<p>
Select2 expects that the results that are returned from the remote endpoint are already filtered ahead of time based on the search term. If your remote endpoint just returns the list of all possible options, you may be interested in using Select2's <a href="examples.html#data-array">support for data arrays</a>.
</p>
<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>
{% highlight js linenos %}
$('select').select2({
ajax: {
transport: function (params, success, failure) {
var request = new AjaxRequest(params.url, params);
request.on('success', success);
request.on('failure', failure);
}
}
});
{% endhighlight %}
</section>

View File

@@ -0,0 +1,150 @@
<section>
<h2 id="data">
Can I load data into Select2 using an array?
</h2>
<p>
While Select2 is designed to be used with a <code>&lt;select&gt;</code> tag
the data that is used to search through and display the results can be
loaded from a JavaScript array using the <code>data</code> option. This
option should be passed in during the initialization of Select2.
</p>
{% highlight js linenos %}
$('select').select2({
data: [
{
id: 'value',
text: 'Text to display'
},
// ... more data objects ...
]
});
{% endhighlight %}
<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>
Do the <code>id</code> properties have to be strings?
</h3>
<p>
Because the <code>value</code> attributes on a <code>&gt;select&lt;</code>
tag must be strings, the <code>id</code> property on the data objects must
also be strings. Select2 will attempt to convert anything that is not a
string to a string, which will work for most situations, but it is
recommended to force all of your ids to strings ahead of time.
</p>
<h3>
I can't select results with blank ids or an id of <code>0</code>!
</h3>
<p>
See <a href="#do-the-id-properties-have-to-be-strings">Do the <code>id</code> properties have to be strings?</a>.
</p>
<h3>
How should nested results be formatted?
</h3>
<p>
Nested results should be specified using the <code>children</code> property
on the data objects that are passed in. This <code>children</code> property
should be an array of data objects that are grouped under this option, and
the label for the group should be specified as the <code>text</code>
property on the root data object.
</p>
{% highlight js linenos %}
{
text: 'Group label',
children: [
{
id: 'nested-1',
text: 'First nested option'
},
// ... more data objects ...
]
}
{% endhighlight %}
<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 href="#how-many-levels-of-nesting-can-there-be">a single level of nesting</a>
is supported. Any additional levels of nesting is not guarenteed to be
displayed properly across all browsers and devices.
</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>
{% include options/not-written.html %}
<h3>
My objects don&apos;t use <code>id</code> for their unique identifiers,
what can I do?
</h3>
<p>
Select2 requires that the <code>id</code> property is used to uniquely
identify the options that are displayed in the results list. If you use a
property other than <code>id</code> (like <code>pk</code>) to uniquely
identify an option, you need to map your old property to <code>id</code>
before passing it to Select2.
</p>
<p>
If you cannot do this on your server or you are in a situation where the
identifier cannot be changed, you can do this in JavaScript before passing
it to Select2.
</p>
{% highlight js linenos %}
var data = $.map(yourArrayData, function (obj) {
obj.id = obj.id || obj.pk; // replace pk with your identifier
return obj;
});
{% endhighlight %}
<h3>
My objects use a property other than <code>text</code> for the text that
needs to be displayed
</h3>
<p>
Just like with the <code>id</code> property, Select2 requires that the text
that should be displayed for an option is stored in the <code>text</code>
property. You can map this property from any existing property using the
following JavaScript.
</p>
{% highlight js linenos %}
var data = $.map(yourArrayData, function (obj) {
obj.text = obj.text || obj.name; // replace name with the property used for the text
return obj;
});
{% endhighlight %}
</section>

View File

@@ -0,0 +1,69 @@
<section>
<h2 id="data-adapters-select-tag">
Can Select2 be used with a <code>&lt;select&gt;</code> tag?
</h2>
<p>
Select2 was designed to be a replacement for the standard <code>&lt;select&gt;</code> boxes that are displayed by the browser, so by default it supports all options and operations that are available in a standard select box, but with added flexibility. There is no special configuration required to make Select2 work with a <code>&lt;select&gt;</code> tag.
</p>
<h3>
Does Select2 support nesting options?
</h3>
<p>
A standard <code>&lt;select&gt;</code> box can display nested options by wrapping them with in an <code>&lt;optgroup&gt;</code> tag.
</p>
{% highlight html linenos %}
<select>
<optgroup label="Group Name">
<option>Nested option</option>
</optgroup>
</select>
{% endhighlight %}
<h3>
How many levels of nesting can there be?
</h3>
<p>
Only a single level of nesting is allowed per the HTML specification. If you nest an <code>&lt;optgroup&gt;</code> within another <code>&lt;optgroup&gt;</code>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.
</p>
<h3>
Can <code>&lt;optgroup&gt;</code> tags be made selectable?
</h3>
<p>
No. This is a limitation of the HTML specification and is not a limitation that Select2 can overcome. You can emulate grouping by using an <code>&lt;option&gt;</code> instead of an <code>&lt;optgroup&gt;</code> and <a href="http://stackoverflow.com/q/30820215/359284#30948247">changing the style by using CSS</a>, but this is not recommended as it is not fully accessible.
</p>
<h3>
How are <code>&lt;option&gt;</code> and <code>&lt;optgroup&gt;</code> tags serialized into data objects?
</h3>
<p>
Select2 will convert the <code>&lt;option&gt;</code> tag into a data object based on the following rules.
</p>
{% highlight js linenos %}
{
"id": "value attribute" || "option text",
"text": "label attribute" || "option text",
"element": HTMLOptionElement
}
{% endhighlight %}
<p>
And <code>&lt;optgroup&gt;</code> tags will be converted into data objects using the following rules
</p>
{% highlight js linenos %}
{
"text": "label attribute",
"children": [ option data object, ... ],
"elment": HTMLOptGroupElement
}
{% endhighlight %}
</section>

View File

@@ -0,0 +1,10 @@
<section>
<h1 id="results">
Displaying results
</h1>
{% include options/dropdown/filtering.html %}
{% include options/dropdown/selections.html %}
{% include options/dropdown/tagging.html %}
{% include options/dropdown/placement.html %}
</section>

View File

@@ -0,0 +1,55 @@
<section>
<h2>
Can I change when search results are loaded?
</h2>
<h3>
Can Select2 wait until the user has typed a search term before triggering the request?
</h3>
{% highlight js linenos %}
$('select').select2({
ajax: {
delay: 250 // wait 250 milliseconds before triggering the request
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Select2 is allowing long search terms, can this be prevented?
</h3>
{% highlight js linenos %}
$('select').select2({
maximumInputLength: 20 // only allow terms up to 20 characters long
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
I only want the search box if there are enough results
</h3>
{% highlight js linenos %}
$('select').select2({
minimumResultsForSearch: 20 // at least 20 results must be displayed
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
How can I permanently hide the search box?
</h3>
{% highlight js linenos %}
$('select').select2({
minimumResultsForSearch: Infinity
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,39 @@
<section>
<h2>
Can I change how the dropdown is placed?
</h2>
<h3 id="dropdown-attachContainer">
Can the dropdown be placed directly after the selection container?
</h3>
{% include options/not-written.html %}
<h3 id="dropdownParent">
Can I pick an element for the dropdown to be appended to?
</h3>
{% highlight js linenos %}
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
I&apos;m using a Bootstrap modal and I can&apos;t use the search box
</h3>
<p>
Use the <code>dropdownParent</code> option, setting it to the modal.
</p>
{% include options/not-written.html %}
<h3>
I&apos;m using jQuery UI and I can&apos;t use the search box
</h3>
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,29 @@
<section>
<h2>
Can I change how selecting results works?
</h2>
<h3>
Can I select the highlighted result when the dropdown is closed?
</h3>
{% highlight js linenos %}
$('select').select2({
selectOnClose: true
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Can I prevent the dropdown from closing when a result is selected?
</h3>
{% highlight js linenos %}
$('select').select2({
closeOnSelect: false
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,89 @@
<section>
<h2>
Can options be created based on the search term?
</h2>
<h3>
How do I enable tagging?
</h3>
{% highlight js linenos %}
$('select').select2({
tags: true
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Does tagging work with a single select?
</h3>
<p>
Yes.
</p>
{% include options/not-written.html %}
<h3>
How do I add extra properties to the tag?
</h3>
{% highlight js linenos %}
$('select').select2({
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
newTag: true // add additional parameters
}
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
Can I control when tags are created?
</h3>
{% highlight js linenos %}
$('select').select2({
createTag: function (params) {
// Don't offset to create a tag if there is no @ symbol
if (params.term.indexOf('@') === -1) {
// Return null to disable tag creation
return null;
}
return {
id: params.term,
text: params.term
}
}
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
How do I control the placement of the option?
</h3>
{% highlight js linenos %}
$('select').select2({
insertTag: function (data, tag) {
// Insert the tag at the end of the results
data.push(tag);
}
});
{% endhighlight %}
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,8 @@
<section>
<h1>
Events
</h1>
{% include options/events/jquery.html %}
{% include options/events/internal.html %}
</section>

View File

@@ -0,0 +1,9 @@
<section>
<h2 id="events-internal">
Internal Select2 events
</h2>
<p>
Select2 has an internal event system that works independently of the DOM event system. This internal event system is only accesssible from plugins and adapters that are connected to Select2.
</p>
</section>

View File

@@ -0,0 +1,101 @@
<section>
<h2 id="events-public">
Public jQuery events
</h2>
<h3>
What events will Select2 trigger?
</h3>
<p>
Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
</p>
<dl class="s2-docs-panels">
<dt>change</dt>
<dd>Triggered whenever an option is selected or removed.</dd>
<dt>select2:close</dt>
<dd>Triggered whenever the dropdown is closed.</dd>
<dt>select2:closing</dt>
<dd>Triggered before the dropdown is closed. This event can be prevented.</dd>
<dt>select2:open</dt>
<dd>Triggered whenever the dropdown is opened.</dd>
<dt>select2:opening</dt>
<dd>Triggered before the dropdown is opened. This event can be prevented.</dd>
<dt>select2:select</dt>
<dd>Triggered whenever a result is selected.</dd>
<dt>select2:selecting</dt>
<dd>Triggered before a result is selected. This event can be prevented.</dd>
<dt>select2:unselect</dt>
<dd>Triggered whenever a selection is removed.</dd>
<dt>select2:unselecting</dt>
<dd>Triggered before a selection is removed. This event can be prevented.</dd>
</dl>
<h3>
Does Select2 include extra information in these events?
</h3>
{% include options/not-written.html %}
<h3>
How can I attach listeners for these events?
</h3>
{% highlight js linenos %}
$('select').on('select2:select', function (evt) {
// Do something
});
{% endhighlight %}
{% include options/not-written.html %}
<h3>
What events does Select2 listen for?
</h3>
<p>
Select2 will listen for the <code>change</code> event on the
<code>&lt;select&gt;</code> that it is attached to. If you make any
external changes that need to be reflected in Select2 (such as changing the
value), you should trigger this event.
</p>
{% highlight js linenos %}
$('select').val('US'); // Select the option with a value of 'US'
$('select').trigger('change'); // Notify any JS components that the value changed
{% endhighlight %}
<h3>
Can I trigger an event other than <code>change</code> to notify Select2 of changes?
</h3>
<p>
It's common for other components to be listening to the <code>change</code>
event, or for custom event handlers to be attached that may have side
effects. Select2 does not have a custom event (like
<code>select2:update</code>) that can be triggered other than
<code>change</code>. You can rely on jQuery's event namespacing to limit
the scope to Select2 though by triggering the <code>change.select2</code>
event.
</p>
{% highlight js linenos %}
$('select').val('US'); // Change the value or make some change to the internal state
$('select').trigger('change.select2'); // Notify only Select2 of changes
{% endhighlight %}
<h3>
What events can be prevented? How can I prevent a selection from being made?
</h3>
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,9 @@
<section>
<div class="alert alert-warning">
This page of the documentation is currently <strong>undergoing a rewrite and may be incomplete</strong>. If you do not find the answer you are looking for on this page, you may have better luck looking at <a href="options-old.html">the old options page</a>.
</div>
<p>
This documentation is set up in the form of a FAQ and covers the most common questions. If you do not find the answer to your question here, you may want to <a href="community.html">reach out to the community</a> to see if someone else can answer it.
</p>
</section>

View File

@@ -0,0 +1,3 @@
<div class="alert alert-info">
This answer to this question has not yet been written. You can <a href="https://github.com/select2/select2/blob/master/docs/README.md#how-can-i-fix-an-issue-in-these-docs">improve this documentation</a> by creating a pull request with an answer to this question.
</div>

View File

@@ -0,0 +1,10 @@
<section>
<h1 id="selections">
Displaying selections
</h1>
{% include options/selections/multiple.html %}
{% include options/selections/placeholder.html %}
{% include options/selections/clearing-selections.html %}
{% include options/selections/templating.html %}
</section>

View File

@@ -0,0 +1,34 @@
<section>
<h2 id="allowClear">
Can I allow users to clear their selections?
</h2>
<p>
You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder.
</p>
{% highlight js linenos %}
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});
{% endhighlight %}
<h3>
Why is a placeholder required?
</h3>
{% include options/not-written.html %}
<h3>
The "x" icon is not clearing the selection
</h3>
{% include options/not-written.html %}
<h3>
Can users remove all of their selections in a multiple select at once?
</h3>
{% include options/not-written.html %}
</section>

View File

@@ -0,0 +1,17 @@
<section>
<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>

View File

@@ -0,0 +1,84 @@
<section>
<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>
{% highlight js linenos %}
$('select').select2({
placeholder: 'Select an option'
});
{% endhighlight %}
<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 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>
{% highlight js linenos %}
$('select').select2({
placeholder: {
id: '-1', // the value of the option
text: 'Select an option'
}
});
{% endhighlight %}
<h3>
Can I change how the placeholder looks?
</h3>
<p>
When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, including the <code>templateSelection</code> option, so you are able to change how it is displayed.
</p>
{% highlight js linenos %}
$('select').select2({
templateResult: function (data) {
if (data.id === '') { // adjust for custom placeholder values
return 'Custom styled placeholder text';
}
return data.text;
}
});
{% endhighlight %}
<p>
<strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a>
</p>
<h3>
My placeholders aren&apos;t being displayed in Internet Explorer
</h3>
<p>
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 <a href="https://github.com/jamesallardice/Placeholders.js">Placeholders.js</a> on your page, or use the full build, in order to add <code>placeholder</code> attribute support to input boxes.
</p>
</section>

View File

@@ -0,0 +1,37 @@
<section>
<h2 id="templateSelection">
How can I customize the way selections are displayed?
</h2>
<p>
When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box. You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
</p>
{% highlight js linenos %}
function template(data, container) {
return data.text;
}
$('select').select2({
templateSelection: template
});
{% endhighlight %}
<h3>
Nothing is being displayed when I select an option
</h3>
{% include options/not-written.html %}
<h3>
I am using HTML in my selection template but it isn't displaying it
</h3>
{% include options/not-written.html %}
<h3>
How can I access the container where the selection is displayed?
</h3>
{% include options/not-written.html %}
</section>