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:
Load result data
Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times.
Loading array data
Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function.
1. Example below inlines the data by specifying an array with id and text keys:
2. If your data does not have a text key, an alternative key can be specified as a string:
3. Or as a function:
4. data can also itself be a function that returns a results object:
Loading remote data
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:
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.
Infinite scroll
Select2 supports lazy-appending of results when the result list is scrolled to the end. Search for some keyword and then scroll the result list to the end to see more results load:
Programmatic access
Select2 supports methods that allow programmatic control of the component:
Disable items
In case that you need to disable certain options so that they can't be selected by the select2 interface, you can now pass in disabled: true with your data.
Sorting displayed results
Try typing 'e' and seeing how the results are sorted. This function is useful for sorting results by relevance to a user's query.
Programmatic Access
Select2 supports methods that allow programmatic control of the component
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 10 characters long.
Auto tokenization
Enter a number of tags by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma.
Reacting to external value changes
Select2 can react to external value changes. This feature allows Select2 to work with front-end frameworks that use data binding between ui components and model values.
Select2 lifecycle
Create and destroy Select2. Destroy method reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
Disabled mode
Disabled mode uses the same functionality and options for both single and multiple selects.
Locked selections
In the event that you need to lock certain selections so that they can't be removed by the select2 interface, you can now pass in locked: true with your data.
Diacritics support
Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below: