RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-12-01 09:06:03 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #37 from select2/develop

Browse Source 
Release Select2 4.0.8
This commit is contained in:
Kevin Brown 2019-07-20 23:24:25 -04:00 committed by GitHub
commit 6f88568c99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/01.getting-started/01.installation/docs.md
View File

@ -13,8 +13,8 @@ A CDN (content delivery network) is the fastest way to get up and running with S
Select2 is hosted on both the [cdnjs](https://cdnjs.com/libraries/select2) and [jsDelivr](https://www.jsdelivr.com/#!select2) CDNs. Simply include the following lines of code in the `<head>` section of your page: Select2 is hosted on both the [cdnjs](https://cdnjs.com/libraries/select2) and [jsDelivr](https://www.jsdelivr.com/#!select2) CDNs. Simply include the following lines of code in the `<head>` section of your page:
``` ```
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
``` ```
>>> <i class="fa fa-info-circle"></i> Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN. >>> <i class="fa fa-info-circle"></i> Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN.

9
pages/03.configuration/01.options-api/docs.md
View File

@ -1,10 +1,10 @@
--- ---
title: Configuration API title: Options
taxonomy: taxonomy:
category: docs category: docs
--- ---
The following is an attempt to provide a comprehensive list of all configuration options available in Select2. This is a list of all the Select 2 configuration options.
| Option | Type | Default | Description | | Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- | | ------ | ---- | ------- | ----------- |
@ -15,7 +15,7 @@ The following is an attempt to provide a comprehensive list of all configuration
| `amdBase` | string | `./` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). | | `amdBase` | string | `./` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). |
| `amdLanguageBase` | string | `./i18n/` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). | | `amdLanguageBase` | string | `./i18n/` | See [Using Select2 with AMD or CommonJS loaders](/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). |
| `closeOnSelect` | boolean | `true` | Controls whether the dropdown is [closed after a selection is made](/dropdown#forcing-the-dropdown-to-remain-open-after-selection). | | `closeOnSelect` | boolean | `true` | Controls whether the dropdown is [closed after a selection is made](/dropdown#forcing-the-dropdown-to-remain-open-after-selection). |
| `containerCss` | | | | | `containerCss` | object | null | Adds custom CSS to the container. Expects key-value pairs: `{ 'css-property': 'value' }` |
| `containerCssClass` | string | `''` | | | `containerCssClass` | string | `''` | |
| `data` | array of objects | `null` | Allows rendering dropdown options from an [array](/data-sources/arrays). | | `data` | array of objects | `null` | Allows rendering dropdown options from an [array](/data-sources/arrays). |
| `dataAdapter` | | `SelectAdapter` | Used to override the built-in [DataAdapter](/advanced/default-adapters/data). | | `dataAdapter` | | `SelectAdapter` | Used to override the built-in [DataAdapter](/advanced/default-adapters/data). |
@ -24,7 +24,7 @@ The following is an attempt to provide a comprehensive list of all configuration
| `disabled` | boolean | `false` | When set to `true`, the select control will be disabled. | | `disabled` | boolean | `false` | When set to `true`, the select control will be disabled. |
| `dropdownAdapter` | | `DropdownAdapter` | Used to override the built-in [DropdownAdapter](/advanced/default-adapters/dropdown) | | `dropdownAdapter` | | `DropdownAdapter` | Used to override the built-in [DropdownAdapter](/advanced/default-adapters/dropdown) |
| `dropdownAutoWidth` | boolean | `false` | | | `dropdownAutoWidth` | boolean | `false` | |
| `dropdownCss` | | | | | `dropdownCss` | object | null | Adds custom CSS to the dropdown. Expects key-value pairs: `{ 'css-property': 'value' }` |
| `dropdownCssClass` | string | `''` | | | `dropdownCssClass` | string | `''` | |
| `dropdownParent` | jQuery selector or DOM node | `$(document.body)` | Allows you to [customize placement](/dropdown#dropdown-placement) of the dropdown. | | `dropdownParent` | jQuery selector or DOM node | `$(document.body)` | Allows you to [customize placement](/dropdown#dropdown-placement) of the dropdown. |
| `escapeMarkup` | callback | `Utils.escapeMarkup` | Handles [automatic escaping of content rendered by custom templates](/dropdown#built-in-escaping). | | `escapeMarkup` | callback | `Utils.escapeMarkup` | Handles [automatic escaping of content rendered by custom templates](/dropdown#built-in-escaping). |
@ -49,3 +49,4 @@ The following is an attempt to provide a comprehensive list of all configuration
| `tokenizer` | callback | | A callback that handles [automatic tokenization of free-text entry](/tagging#automatic-tokenization-into-tags). | | `tokenizer` | callback | | A callback that handles [automatic tokenization of free-text entry](/tagging#automatic-tokenization-into-tags). |
| `tokenSeparators` | array | `[]` | The list of characters that should be used as token separators. | | `tokenSeparators` | array | `[]` | The list of characters that should be used as token separators. |
| `width` | string | `resolve` | Supports [customization of the container width](/appearance#container-width). | | `width` | string | `resolve` | Supports [customization of the container width](/appearance#container-width). |
| `scrollAfterSelect` | boolean | `false` | If `true`, resolves issue for multiselects using `closeOnSelect: false` that caused the list of results to scroll to the first selection after each select/unselect (see https://github.com/select2/select2/pull/5150). This behaviour was intentional to deal with infinite scroll UI issues (if you need this behavior, set `false`) but it created an issue with multiselect dropdown boxes of fixed length. This pull request adds a configurable option to toggle between these two desirable behaviours. |

2
pages/06.data-sources/01.formats/docs.md
View File

@ -24,7 +24,7 @@ Select2 can render programmatically supplied data from an array or remote data s
} }
``` ```
Each object should contain, _at a minimum_, an `id` and a `text` property. Any additional parameters passed in with data objects will be included on the data objects that Select2 exposes. Select2 requires that each object contain an `id` and a `text` property. Additional parameters passed in with data objects will be included on the data objects that Select2 exposes.
The response object may also contain pagination data, if you would like to use the "infinite scroll" feature. This should be specified under the `pagination` key. The response object may also contain pagination data, if you would like to use the "infinite scroll" feature. This should be specified under the `pagination` key.

36
pages/06.data-sources/02.ajax/docs.md
View File

@ -37,7 +37,7 @@ You can configure how Select2 searches for remote data using the `ajax` option.
## Request parameters ## Request parameters
Select2 will issue a request to the specified URL when the user opens the control (unless there is a `minimumInputLength` set), and again every time the user types in the search box. By default, it will send the following as query string parameters: Select2 will issue a request to the specified URL when the user opens the control (unless there is a `minimumInputLength` set as a Select2 option), and again every time the user types in the search box. By default, it will send the following as query string parameters:
- `term` : The current search term in the search box. - `term` : The current search term in the search box.
- `q` : Contains the same contents as `term`. - `q` : Contains the same contents as `term`.
@ -74,7 +74,7 @@ $('#mySelect2').select2({
ajax: { ajax: {
url: '/example/api', url: '/example/api',
processResults: function (data) { processResults: function (data) {
// Tranforms the top-level key of the response object from 'items' to 'results' // Transforms the top-level key of the response object from 'items' to 'results'
return { return {
results: data.items results: data.items
}; };
@ -309,7 +309,6 @@ $(".js-example-data-ajax").select2({
cache: true cache: true
}, },
placeholder: 'Search for a repository', placeholder: 'Search for a repository',
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1, minimumInputLength: 1,
templateResult: formatRepo, templateResult: formatRepo,
templateSelection: formatRepoSelection templateSelection: formatRepoSelection
@ -320,23 +319,28 @@ function formatRepo (repo) {
return repo.text; return repo.text;
} }
var markup = "<div class='select2-result-repository clearfix'>" + var $container = $(
"<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" + "<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; "<div class='select2-result-repository__title'></div>" +
"<div class='select2-result-repository__description'></div>" +
if (repo.description) { "<div class='select2-result-repository__statistics'>" +
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> </div>" +
} "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> </div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> </div>" +
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" + "</div>" +
"</div></div>"; "</div>" +
"</div>"
);
return markup; $container.find(".select2-result-repository__title").text(repo.full_name);
$container.find(".select2-result-repository__description").text(repo.description);
$container.find(".select2-result-repository__forks").append(repo.forks_count + " Forks");
$container.find(".select2-result-repository__stargazers").append(repo.stargazers_count + " Stars");
$container.find(".select2-result-repository__watchers").append(repo.watchers_count + " Watchers");
return $container;
} }
function formatRepoSelection (repo) { function formatRepoSelection (repo) {

16
pages/07.dropdown/docs.md
View File

@ -92,6 +92,22 @@ $('#mySelect2').select2({
This is useful when attempting to render Select2 correctly inside of modals and other small containers. If you're having trouble using the search box inside a Bootstrap modal, for example, trying setting the `dropdownParent` option to the modal element. This is useful when attempting to render Select2 correctly inside of modals and other small containers. If you're having trouble using the search box inside a Bootstrap modal, for example, trying setting the `dropdownParent` option to the modal element.
If you are rendering a Select2 inside of a modal (Bootstrap 3.x) that has not yet been rendered or opened, you may need to bind to the `shown.bs.modal` event:
```
$('body').on('shown.bs.modal', '.modal', function() {
$(this).find('select').each(function() {
var dropdownParent = $(document.body);
if ($(this).parents('.modal.in:first').length !== 0)
dropdownParent = $(this).parents('.modal.in:first');
$(this).select2({
dropdownParent: dropdownParent
// ...
});
});
});
```
If you run into positioning issues while using the default `body` attachment, you may find it helpful to use your browser console to inspect the values of: If you run into positioning issues while using the default `body` attachment, you may find it helpful to use your browser console to inspect the values of:
- `document.body.style.position` - `document.body.style.position`

8
pages/08.selections/docs.md
View File

@ -25,10 +25,16 @@ function formatState (state) {
if (!state.id) { if (!state.id) {
return state.text; return state.text;
} }
var baseUrl = "{{ url('user://pages/images/flags') }}"; var baseUrl = "{{ url('user://pages/images/flags') }}";
var $state = $( var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>' '<span><img class="img-flag" /> <span></span></span>'
); );
// Use .text() instead of HTML string concatenation to avoid script injection issues
$state.find("span").text(state.text);
$state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png");
return $state; return $state;
}; };

2
pages/12.programmatic-control/04.events/docs.md
View File

@ -23,6 +23,8 @@ Select2 will trigger a few different events when different actions are taken usi
| `select2:select` | Triggered whenever a result is selected. `select2:selecting` is fired before this and can be prevented. | | `select2:select` | Triggered whenever a result is selected. `select2:selecting` is fired before this and can be prevented. |
| `select2:unselecting` | Triggered before a selection is removed. This event can be prevented. | | `select2:unselecting` | Triggered before a selection is removed. This event can be prevented. |
| `select2:unselect` | Triggered whenever a selection is removed. `select2:unselecting` is fired before this and can be prevented. | | `select2:unselect` | Triggered whenever a selection is removed. `select2:unselecting` is fired before this and can be prevented. |
| `select2:clearing` | Triggered before all selections are cleared. This event can be prevented. |
| `select2:clear` | Triggered whenever all selections are cleared. `select2:clearing` is fired before this and can be prevented. |
## Listening for events ## Listening for events

2
pages/13.i18n/docs.md
View File

@ -7,7 +7,7 @@ process:
never_cache_twig: true never_cache_twig: true
--- ---
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/i18n/es.js', 90) %} {% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/i18n/es.js', 90) %}
## Message translations ## Message translations

16
pages/15.upgrading/02.migrating-from-35/docs.md
View File

@ -275,6 +275,22 @@ Select2 previously provided multiple options for formatting the results list and
You should refer to the updated documentation on templates for [results](/dropdown) and [selections](/selections) when migrating from previous versions of Select2. You should refer to the updated documentation on templates for [results](/dropdown) and [selections](/selections) when migrating from previous versions of Select2.
### Renamed `createSearchChoice`
This method has been renamed to `createTag`. You should refer to the documentation on [option creation](/tagging#tag-properties) when migrating from previous versions of Select2.
The `createSearchChoicePosition` option has been removed in favor of the `insertTag` function. New tags are added to the bottom of the list by default.
```
insertTag: function (data, tag) {
// Insert the tag at the end of the results
data.push(tag);
}
```
### Renamed `selectOnBlur`
This method has been renamed to `selectOnClose`.
### The `id` and `text` properties are strictly enforced ### The `id` and `text` properties are strictly enforced
When working with array and AJAX data in the past, Select2 allowed a custom `id` function or attribute to be set in various places, ranging from the initialization of Select2 to when the remote data was being returned. This allowed Select2 to better integrate with existing data sources that did not necessarily use the `id` attribute to indicate the unique identifier for an object. When working with array and AJAX data in the past, Select2 allowed a custom `id` function or attribute to be set in various places, ranging from the initialization of Select2 to when the remote data was being returned. This allowed Select2 to better integrate with existing data sources that did not necessarily use the `id` attribute to indicate the unique identifier for an object.

4
themes/site/templates/partials/base.html.twig
View File

@ -17,7 +17,7 @@
{% do assets.addCss('theme://css/custom.css',100) %} {% do assets.addCss('theme://css/custom.css',100) %}
{% do assets.addCss('theme://css/font-awesome.min.css',100) %} {% do assets.addCss('theme://css/font-awesome.min.css',100) %}
{% do assets.addCss('theme://css/featherlight.min.css') %} {% do assets.addCss('theme://css/featherlight.min.css') %}
{% do assets.addCss('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css') %} {% do assets.addCss('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css') %}
{% do assets.addCss('theme://css/s2-docs.css', 100) %} {% do assets.addCss('theme://css/s2-docs.css', 100) %}
{% do assets.addCss('theme://css/theme.css',100) %} {% do assets.addCss('theme://css/theme.css',100) %}
@ -33,7 +33,7 @@
{% block javascripts %} {% block javascripts %}
{% do assets.addJs('jquery',101) %} {% do assets.addJs('jquery',101) %}
{% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %} {% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.full.min.js', 100) %} {% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.full.min.js', 100) %}
{% do assets.addJs('https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js', 100) %} {% do assets.addJs('https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js', 100) %}
{% do assets.addJs('theme://js/featherlight.min.js') %} {% do assets.addJs('theme://js/featherlight.min.js') %}
{% do assets.addJs('theme://js/clipboard.min.js') %} {% do assets.addJs('theme://js/clipboard.min.js') %}