A popular use-case seen around the Web is presenting a form, which collects user input, and one of the required fields is a required Country. Usually this is represented by a SELECT element containing all 200 countries in the world, and the users choosing a country will have to scroll until they find their own. The sorted order of the countries will somewhat alleviate that, but some people still find the process too cumbersome.
Another functionality wanted by the existing SELECT element is the ability to add images or other HTML content in its options. Currently this is partially supported – some web browsers support styling the options with a background-image property, which will render an image along each one. However, this is still far away from adding any type of HTML content inside the option.
The ComboBox widget is an “editable” select control, which means that in addition to the options provided for selection, the user can specify a custom one by typing its value into a text box. For scenarios that do not require this, the DropDown widget can be used.
The templating options provided by the ComboBox make it unique among native and other select components. The widget provides three different template options – one for the value of the control (the value attribute of the underlying control), an option for the text displayed for each item in the selection list, and a third one for specifying what is displayed in the text input part of the control. Using these, a developer can control what is rendered in each different place for the currently selected item. An example of this is a scenario in which we have a list of objects representing different users in a system, each one having a unique id, first and last name, photo, etc, and we would like to build the selection options with their value set to the id and text displaying the photo and names of the user.
Another great feature of the ComboBox is the support for a DataSource for populating the list of options available. The datasource is a generic data provider object that can connect to many different stores such as constant variables and cookies on the client-side, as well as different kinds of web services on the server-side.
The ComboBox can also be configured to support auto-complete functionality, which will cause the options to be filtered and only items matching some criteria (usually the text that is typed in the editable text box part of the control) to appear in the available selections list. The autocomplete filtering is bound with the datasource and can support complex scenarios such as filtering by several criteria and different levels of properties of the items’ objects.
The events raised by the ComboBox include standard ones such as focus, blur and change (raised on blur if its value has changed), as well as a select event, raised when the selection of the component changes. The select event is not raised by native SELECT elements, so by using the Shield UI ComboBox widget and having access to the select event gives developers a greater level of control over the component.