diff --git a/pages/01.getting-started/01.installation/docs.md b/pages/01.getting-started/01.installation/docs.md index 99181507..2ba240db 100644 --- a/pages/01.getting-started/01.installation/docs.md +++ b/pages/01.getting-started/01.installation/docs.md @@ -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 `` section of your page: ``` - - + + ``` >>> Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN. diff --git a/pages/03.configuration/01.options-api/docs.md b/pages/03.configuration/01.options-api/docs.md index d01c35dd..06af83c7 100644 --- a/pages/03.configuration/01.options-api/docs.md +++ b/pages/03.configuration/01.options-api/docs.md @@ -1,10 +1,10 @@ --- -title: Configuration API +title: Options taxonomy: 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 | | ------ | ---- | ------- | ----------- | @@ -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). | | `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). | -| `containerCss` | | | | +| `containerCss` | object | null | Adds custom CSS to the container. Expects key-value pairs: `{ 'css-property': 'value' }` | | `containerCssClass` | string | `''` | | | `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). | @@ -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. | | `dropdownAdapter` | | `DropdownAdapter` | Used to override the built-in [DropdownAdapter](/advanced/default-adapters/dropdown) | | `dropdownAutoWidth` | boolean | `false` | | -| `dropdownCss` | | | | +| `dropdownCss` | object | null | Adds custom CSS to the dropdown. Expects key-value pairs: `{ 'css-property': 'value' }` | | `dropdownCssClass` | string | `''` | | | `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). | @@ -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). | | `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). | +| `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. | diff --git a/pages/06.data-sources/01.formats/docs.md b/pages/06.data-sources/01.formats/docs.md index befadeab..73d044b2 100644 --- a/pages/06.data-sources/01.formats/docs.md +++ b/pages/06.data-sources/01.formats/docs.md @@ -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. diff --git a/pages/06.data-sources/02.ajax/docs.md b/pages/06.data-sources/02.ajax/docs.md index 4dd177e1..70aa31b2 100644 --- a/pages/06.data-sources/02.ajax/docs.md +++ b/pages/06.data-sources/02.ajax/docs.md @@ -37,7 +37,7 @@ You can configure how Select2 searches for remote data using the `ajax` option. ## 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. - `q` : Contains the same contents as `term`. @@ -74,7 +74,7 @@ $('#mySelect2').select2({ ajax: { url: '/example/api', 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 { results: data.items }; @@ -309,7 +309,6 @@ $(".js-example-data-ajax").select2({ cache: true }, placeholder: 'Search for a repository', - escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection @@ -320,23 +319,28 @@ function formatRepo (repo) { return repo.text; } - var markup = "
" + - "
" + - "
" + - "
" + repo.full_name + "
"; + var $container = $( + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + + "
" + ); - if (repo.description) { - markup += "
" + repo.description + "
"; - } + $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"); - markup += "
" + - "
" + repo.forks_count + " Forks
" + - "
" + repo.stargazers_count + " Stars
" + - "
" + repo.watchers_count + " Watchers
" + - "
" + - "
"; - - return markup; + return $container; } function formatRepoSelection (repo) { diff --git a/pages/07.dropdown/docs.md b/pages/07.dropdown/docs.md index f20138be..68a7149b 100644 --- a/pages/07.dropdown/docs.md +++ b/pages/07.dropdown/docs.md @@ -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. +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: - `document.body.style.position` diff --git a/pages/08.selections/docs.md b/pages/08.selections/docs.md index d563450d..5f79efac 100644 --- a/pages/08.selections/docs.md +++ b/pages/08.selections/docs.md @@ -25,10 +25,16 @@ function formatState (state) { if (!state.id) { return state.text; } + var baseUrl = "{{ url('user://pages/images/flags') }}"; var $state = $( - ' ' + state.text + '' + ' ' ); + + // 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; }; diff --git a/pages/12.programmatic-control/04.events/docs.md b/pages/12.programmatic-control/04.events/docs.md index 08f34d44..26350d3f 100644 --- a/pages/12.programmatic-control/04.events/docs.md +++ b/pages/12.programmatic-control/04.events/docs.md @@ -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: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: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 diff --git a/pages/13.i18n/docs.md b/pages/13.i18n/docs.md index 950ed900..8a57d825 100644 --- a/pages/13.i18n/docs.md +++ b/pages/13.i18n/docs.md @@ -7,7 +7,7 @@ process: 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 diff --git a/pages/15.upgrading/02.migrating-from-35/docs.md b/pages/15.upgrading/02.migrating-from-35/docs.md index 43400169..8e9ff384 100644 --- a/pages/15.upgrading/02.migrating-from-35/docs.md +++ b/pages/15.upgrading/02.migrating-from-35/docs.md @@ -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. +### 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 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. diff --git a/themes/site/templates/partials/base.html.twig b/themes/site/templates/partials/base.html.twig index 786145eb..a1df0646 100644 --- a/themes/site/templates/partials/base.html.twig +++ b/themes/site/templates/partials/base.html.twig @@ -17,7 +17,7 @@ {% do assets.addCss('theme://css/custom.css',100) %} {% do assets.addCss('theme://css/font-awesome.min.css',100) %} {% 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/theme.css',100) %} @@ -33,7 +33,7 @@ {% block javascripts %} {% do assets.addJs('jquery',101) %} {% 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('theme://js/featherlight.min.js') %} {% do assets.addJs('theme://js/clipboard.min.js') %}