Kevin Brown
GitHub
commit
6f88568c99
@ -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:
|
||||
|
||||
```
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
|
||||
<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.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.
|
||||
|
||||
@ -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. |
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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 = "<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__meta'>" +
|
||||
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
|
||||
|
||||
if (repo.description) {
|
||||
markup += "<div class='select2-result-repository__description'>" + repo.description + "</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 class='select2-result-repository__title'></div>" +
|
||||
"<div class='select2-result-repository__description'></div>" +
|
||||
"<div class='select2-result-repository__statistics'>" +
|
||||
"<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>" +
|
||||
"</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) {
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -25,10 +25,16 @@ function formatState (state) {
|
||||
if (!state.id) {
|
||||
return state.text;
|
||||
}
|
||||
|
||||
var baseUrl = "{{ url('user://pages/images/flags') }}";
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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') %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user