Initial commit

This commit is contained in:
meusinfirmary
2025-04-22 14:33:37 +07:00
commit b9891d2f81
1305 changed files with 452033 additions and 0 deletions

View File

@ -0,0 +1,45 @@
---
title: Options
taxonomy:
category: docs
---
This is a list of all the Select2 configuration options.
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| `ajax` | object | `null` | Provides support for [ajax data sources](/data-sources/ajax). |
| `allowClear` | boolean | `false` | Provides support for [clearable selections](/selections#clearable-selections). |
| `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). |
| `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). |
| `debug` | boolean | `false` | Enable debugging messages in the browser console. |
| `dir` | string | `ltr` | Sets the [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the selection and dropdown containers to indicate the direction of the text. |
| `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` | |
| `dropdownCssClass` | string | `''` | Adds additional CSS classes to the dropdown container. The helper `:all:` can be used to add all CSS classes present on the original `<select>` element. |
| `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). |
| `language` | string or object | `EnglishTranslation` | Specify the [language used for Select2 messages](/i18n#message-translations). |
| `matcher` | A callback taking search `params` and the `data` object. | | Handles custom [search matching](/searching#customizing-how-results-are-matched). |
| `maximumInputLength` | integer | `0` | [Maximum number of characters](/searching#maximum-search-term-length) that may be provided for a search term. |
| `maximumSelectionLength` | integer | `0` | The maximum number of items that may be selected in a multi-select control. If the value of this option is less than 1, the number of selected items will not be limited.
| `minimumInputLength` | integer | `0` | [Minimum number of characters required to start a search.](/searching#minimum-search-term-length) |
| `minimumResultsForSearch` | integer | `0` | The minimum number of results required to [display the search box](/searching#limiting-display-of-the-search-box-to-large-result-sets). |
| `multiple` | boolean | `false` | This option enables multi-select (pillbox) mode. Select2 will automatically map the value of the `multiple` HTML attribute to this option during initialization. |
| `placeholder` | string or object | `null` | Specifies the [placeholder](/placeholders) for the control. |
| `resultsAdapter` | | `ResultsAdapter` | Used to override the built-in [ResultsAdapter](/advanced/default-adapters/results). |
| `selectionAdapter` | | `SingleSelection` or `MultipleSelection`, depending on the value of `multiple`. | Used to override the built-in [SelectionAdapter](/advanced/default-adapters/selection). |
| `selectionCssClass` | string | `''` | Adds additional CSS classes to the selection container. The helper `:all:` can be used to add all CSS classes present on the original `<select>` element. |
| `selectOnClose` | boolean | `false` | Implements [automatic selection](/dropdown#automatic-selection) when the dropdown is closed. |
| `sorter` | callback | | |
| `tags` | boolean / array of objects | `false` | Used to enable [free text responses](/tagging). |
| `templateResult` | callback | | Customizes the way that [search results are rendered](/dropdown#templating). |
| `templateSelection` | callback | | Customizes the way that [selections are rendered](/selections#templating). |
| `theme` | string | `default` | Allows you to set the [theme](/appearance#themes). |
| `tokenizer` | callback | | A callback that handles [automatic tokenization of free-text entry](/tagging#automatic-tokenization-into-tags). |
| `tokenSeparators` | array | `null` | 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. |

View File

@ -0,0 +1,31 @@
---
title: Global defaults
taxonomy:
category: docs
---
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 like [custom AMD builds](/getting-started/builds-and-modules#using-select2-with-amd-or-commonjs-loaders). Select2 exposes the default options through `$.fn.select2.defaults`, which allows you to set them globally.
When setting options globally, any past defaults that have been set will be overridden. Default options are only used when an option is requested that has not been set during initialization.
You can set default options by calling `$.fn.select2.defaults.set("key", "value")`. For example:
```
$.fn.select2.defaults.set("theme", "classic");
```
## Nested options
To set a default values for cache, use the same notation used for [HTML `data-*` attributes](/configuration/data-attributes). Two dashes (`--`) will be replaced by a level of nesting, and a single dash (`-`) will convert the key to a camelCase string:
```
$.fn.select2.defaults.set("ajax--cache", false);
```
## Resetting default options
You can reset the default options to their initial values by calling
```
$.fn.select2.defaults.reset();
```

View File

@ -0,0 +1,64 @@
---
title: data-* attributes
taxonomy:
category: docs
---
It is recommended that you declare your configuration options by [passing in an object](/configuration) when initializing Select2. However, you may also define your configuration options by using the HTML5 `data-*` attributes, which will override any options set when initializing Select2 and any [defaults](/configuration/defaults).
```
<select data-placeholder="Select a state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
```
>>> Some options are not supported as `data-*`, for example `disabled` as it's not a Javascript option, but it's an HTML [attribute](/configuration/options-api).
## Nested (subkey) options
Sometimes, you have options that are nested under a top-level option. For example, the options under the `ajax` option:
```
$(".js-example-data-ajax").select2({
ajax: {
url: "http://example.org/api/test",
cache: false
}
});
```
To write these options as `data-*` attributes, each level of nesting should be separated by two dashes (`--`):
```
<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true">
...
</select>
```
The value of the option is subject to jQuery's [parsing rules](https://api.jquery.com/data/#data-html5) for HTML5 data attributes.
>>> Due to [a jQuery bug](https://github.com/jquery/jquery/issues/2070), nested options using `data-*` attributes [do not work in jQuery 1.x](https://github.com/select2/select2/issues/2969).
## `camelCase` options
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 `allowClear` should instead be defined as `allow-clear`.
This means that declaring your `<select>` tag as...
```
<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true">
...
</select>
```
Will be interpreted the same as initializing Select2 as...
```
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true
});
```

View File

@ -0,0 +1,13 @@
---
title: Configuration
taxonomy:
category: docs
---
To configure custom options when you initialize Select2, simply pass an object in your call to `.select2()`:
```
$('.js-example-basic-single').select2({
placeholder: 'Select an option'
});
```