The Multiselect is textbox component that allows the user to type or choose multiple values from the list of predefined options. This has several out of box features such as data binding, filtering, grouping, Checkbox mode, custom value, UI customization, accessibility, and more.
You can bind data from a variety of data sources in the array of primitive data, JSON data collections, or remote data source using different kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. This uses Essential JS 2’s data manager to manage data and also has customization option for data request and processing.
Built-in filtering support with a rich set of filtering configurations is available to match all your application needs.
Provides support to filter data based on starts with, ends with, and contains.
You can customize the filter query or use your own filter libraries to set filtered data.
Multiselect has diacritic character sensitivity. This behavior can be turned on/off.
You can filter data with or without considering the casing for typed characters.
Provides option to set the number of characters required to filter.
Controls the appearance of each item displayed in the pop-up list using templating.
Defines custom appearance of each list item using item template.
Designs its own header for the pop-up list using header template.
Designs its own custom footer for the pop-up list using footer template.
Adds icons to each list item.
Configures custom look if there is no suggestion to display.
Defines custom appearance of the selected value using value template.
Customizes the selected chip element on selection action.
Various render modes are available to visualize the selected items.
By default, the selected items are displayed as a chip (box mode) when the component gets focus, otherwise, they are displayed with a delimiter character.
Selected items are always displayed as chip items.
Selected items are always displayed with a delimiter character.
Enabling the checkbox on each item helps the user to handle multiple selections.
Allows the user to add new values that are not present in the predefined list.
Groups the suggestions based on different categories with individual header.
You can limit the number of items that can be selected in a component.
The width and height of a pop-up list are adjustable.
Seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.
You can display items in the ascending or descending order in a pop-up.
Provides responsive mode that gives adaptive redesigned UI appearance for mobile devices and recognizes touch gestures.
Fully supports WAI-ARIA accessibility that makes list view accessible to on-screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Designed the UI element visuals such as foreground color, background color, line spacing, text, and images based on WCAG 2.0 standard.
Supports right to left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.
Developers can customize all UI elements and control their behaviors according to the end user’s requirement using its rich set of client-side APIs.