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
