Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.
Enhancing native selects with search by using native selects with a better multi-select interface. Easily load items via AJAX and have them searchable. Native selects only support one level of nesting. Select2 does not have this restriction. You can also work with large, remote datasets: ability to partially load a dataset based on the search term.
Select2 can take a regular select box with search options within the Select control
Use .select2 class for basic select2 control.
A placeholder value can be defined and will be displayed until a selection is made. Select2 uses the placeholder attribute on multiple select boxes.
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.
Select2 allows you to hide the search box depending on the number of options which are displayed. In this example, we use the value Infinity to tell Select2 to never display the search box.
You can configure how Select2 searches for remote data using the ajax option. Select2 will pass any options in the ajax object to jQuery's $.ajax function, or the transport function you specify.
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute
Use .select2 class for basic select2 control. Use multiple="multiple" attribute for multiple select box
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect
Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the multiple attribute with maximumSelectionLength in the select2 options.
Use data attribute data-icon to add icon name for each options. And use class .js-select2-icons to set icon with option.