Select2
Select2 is the jQuery replacement for select boxes
About
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Guidelines, tutorials and more on Select2's Official Documentation
Single select boxes Select2
Adding .select2 class to the select element.
Multi-select boxes Select2
Adding .select2 class and multiple attribute to the select element.
Templating Select2
By default, Select2 will display the text property of each data object within the list of results. The appearance of search results in the dropdown can be customized by using the templateResult option
Limiting the number of selections Select2
Select2 multi-value select boxes can set restrictions regarding the maximum number of options that can be selected. The select below is declared with the multiple attribute with maximumSelectionLength in the select2 options.
Clearable selections Select2
When set to true, causes a clear button (`x` icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.
Hiding the search box Select2
Single select
For single selects, Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.
Multi-select
For multi-select boxes, there is no distinct search control. So, to disable search for multi-select boxes, you will need to set the disabled property to true whenever the dropdown is opened or closed:
Item with icon Select2
By default, Select2 will display the text property of each data object within the list of results, seletions. The appearance of search results in the dropdown and seletions can be customized by using the templateResult, templateSelection and escapeMarkup options
Use data attribute data-icon to add icon for each options. And use class .select2-with-icon to set icon with option.
With Ajax Select2
Select2 comes with AJAX support built in, using jQuery's AJAX methods.