Single select2 select is a jQuery based replacement for browser default
select boxes. Is re-uses look and feel from regular selects, but significantly extends
default functionality by applying custom style to the menu (similar to dropdown menu),
adding filtering, supporting remote data sets and many other features. Check out some
examples of single select with various options below:
Basic examples
Input group
@
0.00
Sizing
Advanced examples
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
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
1. Example below loads array:
2. Example below loads array with selected option:
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.
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
Select2's default matcher will ignore diacritics, making
it easier for users to filter results in international selects. Type
"aero" into the select above
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
Multiple select
Multiple Select2 select is a very extensive alternative to regular multiple
select, where selected options are displayed as inline list of pills. It also supports
various features such as remote data sets, programmatic control, internationalization,
tagging, grouping, real time filtering and more. Check out some examples of multiple
select with various options below:
Basic examples
Input group
@
0.00
Sizing
Advanced examples
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
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
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
Select2 multi-value select boxes can set restrictions
regarding the maximum number of options selected. The select below is
declared with maximumSelectionLength option
Select2's default matcher will ignore diacritics, making
it easier for users to filter results in international selects. Type
"aero" into the select above
