The combobox is a text box component that allows users to type a value or choose an option from the list of predefined options. This has several out-of-the-box features, such as data binding, filtering, UI customization, and custom template.
In editable mode, the combo box allows users to edit in the text box that shows the suggestion in drop-down list based on the input. Non-editable mode is used to prevent users from typing and select from drop-down list.
You can pick from various filtering options such as starts with, contains, and ends with. You can also pick whether to filter with or without case sensitivity.
Highlights the matching text that occurs first.
Highlights the matching text that occurs multiple times.
The combo box control starts offering matches as soon as users start typing. This feature can be changed by setting the number of characters required to start matching.
The combo box component has autofill option. This completes the word that users type from the suggestion text. So, the end users can search for the items easily.It suggests a list of filtered items in a pop-up or appends the rest of the suggested words in the input area. This also appends the matched item and displays the list of filtered items suggested in a pop-up at the same time.
If the control is at the bottom of the application, where the default keyboard appears and hides the pop-up, the pop-up can be placed at the top.
The input field has been designed to address scenarios such as email address bars. You can select multiple items with token representation or simply divide them with a delimiter.
Customizable token representation allows users to remove an item with its close button.
Selected items can be divided with desired characters such as “$” for dollar separation or ‘,’ for traditional comma separation.
The combobox control can be thoroughly customized in the following areas.
The control accepts a template for pop-ups to change the look and feel of the items.
You can design your own header and footer for the pop-up list using the header and footer template.
The control accepts any custom view in the place of the text box.
By default, the customizable appearance of the control is designed to adopt native look and feel of the deployment platform.
The color of pop-ups and text can be customized to fit the application design.
The font size can be customized with pixel precision or with standard options, such as small, medium, and large.
You will not be limited to use traditional fonts only, but you can also use custom fonts that suit the application. The control renders certain iconic fonts too.
The combo box control provides some additional features that make it more user-friendly.
A customizable clear button is available to clear all the text in a single tap. The button can be enabled or disabled.
Watermark prompts with an information hint when the search box is not in focus and contains an empty string.
Every aspect of the combobox control has been designed with MVVM pattern in mind.
All static text can be localized with the required language.
Along with a list of strings, a real-time object can also be used to direct the search member to search and display.
The pop-up list has a provision to place an icon. A member can also be assigned to form the object.