1. SmartAdmin
  2. Form Plugins
  3. Select2

Select2ADDON Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.

About

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.

Find in-depth, guidelines, tutorials and more on Select2's Official Documentation

IE10 Support: Since this is the latest version of select2 with a customized UI to match SmartAdmin WebApp, some parts of select2 may have issues with IE10. This is due to the limitation of IE10 CSS & Javascript engine, which is currently outdated and has no workaround method. You may use earlier version of select2 and its vanilla skin if select2 is a must have for your list of plugins.

Select Single

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.

Select Multiple

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.