Forms - Select2 Selects
Basic setup Examples with basic options
Select sizing Single and multiple selects sizing
Advanced usage More complex configurations
Minimum input
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful. Simply specify a number of input characters using minimumInputLength option:
Customizing how results are matched
Example of how matched results can be customized. Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere.
Loading array data
Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.
1. Example below loads array:
2. Example below loads array with selected option:
Loading remote data
Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API. Example also includes infinite scrolling feature:
Diacritics support in single select
Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below:
Clearing results
Whether or not a clear button is displayed when the select box has a selection. The button, when clicked, resets the value of the select box back to the placeholder.
Programmatic access
Select2 supports methods that allow programmatic control of the component: you can set and get single or multiple values, control menu visibility by opening and closing it, make the menu enabled or disabled.
1. Set and get value:
2. Enable and disable menu:
3. Destroy and create menu:
4. Open and close menu:
Tagging support
Select2 can be used to quickly set up fields used for tagging. When tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice.
Maximum input length
Select2 can be set a limit on the number of characters that can be entered per tag. You would not be able to enter any input of more than 5 characters long.
Auto tokenization
Select2 supports ability to add choices automatically as the user is typing into the search field. Try typing in the search field below and entering a space or a comma.
Limiting the number of selections
Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with maximumSelectionLength option.
Diacritics support in multiple select
Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below:
Programmatic access
Select2 supports methods that allow programmatic control of the component: you can set and get single or multiple values, control menu visibility by opening and closing it, make the menu enabled or disabled.
1. Reacting to external value changes:
2. Enable and disable menu:
3. Destroy and create menu:
4. Clear selection:
5. Open and close menu: