#### Forms - Select2 Selects

Statistics Invoices Schedule

###### Basic setup Examples with basic options

##### Single select

Basic select
Fixed select width
Select with search
Select with placeholder
Select with icons
Disable items
Disabled select
Select background color
Menu background color
Custom color
Custom border color

##### Multiple select

Multiple select
Fixed width select
With placeholder
With icons
Drag and drop sorting
Disable items
Disabled select
Select background color
Custom colors
Item colors
Custom border color

###### Select sizing Single and multiple selects sizing

##### Single select sizing

Large select
Default select
Small select
Mini select

##### Multiple select sizing

Large select
Default select
Small select
Mini select

###### Advanced usage More complex configurations

##### Advanced single selects

###### 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.

##### Advanced multiple selects

###### 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: