Improving User Experience Using Shield UI JavaScript ComboBox Widget
Native HTML elements used in web pages do not always provide the experience intended by developers and needed by the end-users. This article describes how Shield UI JavaScript widgets can be used to solve common and not-so-common UI problems of the modern web development world.
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 Shield UI JavaScript Framework addresses these exact demands for enriching user experience and provides many new widgets to help developers achieve it. Below you can see a picture of the ComboBox widget in a sample scenario, demonstrating a lot of its functionalities.
Initialization
ShieldUI’s JavaScript ComboBox widget is a very powerful and yet simple-to-use component. It can be initialized from an existing SELECT or an INPUT element on a webpage, taking the options from and setting the current selection as it was in the original element. Every ShieldUI javascript widget is keeping the value of the original element in sync with the widget’s state – i.e., updating the selection of a ComboBox widget will update the selected option in its underlying SELECT element, making it transparent for developers, who will not have to worry about that when submitting forms to send data to the web server.
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.
Templates
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.
DataSource Support
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.
Auto-complete
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.
Events
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.
Shield UI’s ComboBox JavaScript widget provides many other features like animation, various size properties, selected value and index. Its simple interface allows web designers and developers to easily integrate it in any project. Check its online documentation and demo sections, and build your existing and new web pages more functional and appealing by using the ComboBox component.
