Smart select is an easy way of changing form selects to dynamic pages by using groups of checkboxes and radio inputs.
We can use smart select in various types as specified in the table below −
|S.No||Type & Description|
|1||Smart Select Layout
Smart select layout defines a list view inside the select element using smart-select class.
|2||Smart Select with Search Bar
Smart select searches the elements by using search bar and enables it by setting the data-searchbar class to true.
|3||Custom Page Title and Back Link Text
You can set the custom page title and back link for smart select using data-page-title and data-back-text attributes.
|4||Open in Popup
Smart select can be open as popup by using the data-open-in attribute to popup.
|5||Open in Picker
Smart select can be displayed as picker modal by setting the data-open-in attribute to picker.
|6||Custom Icons, Colors and Images
You can define custom icon, color or image on the smart select by using the data-option-icon, data-option-color and data-option-image attributes respectively.
|7||Multiple Select and Optgroup
Smart select allows to use multiple select and group options by using the multiple and optgroup attributes.
|8||Multiple Select and Maxlength
Smart select allows to select limited number items by using the maxlength attribute.
You can have some more types of smart select, which can be used in different scenario as listed in the table below −
|S.No||Type & Description||Attribute|
Close Smart Select On User Select
You can close the smart select when the user selects any option.
|data-back-on-select = "true"|
Smart Select With Virtual List
Virtual list can used with smart select if you have lots of options.
|data-virtual-list = "true"|
Smart Select Color Themes
You can specify the color themes for form and navbar on smart select page.
data-form-theme = "color"
data-navbar-theme = "color"
Set Smart Select Value By Option Text
Value for smart select can be set by using the option value.
Adding Options Dynamically
You can add options dynamically to smart select, even if they are already opened.
myApp.smartSelectAddOption (select, optionHTML, index)