jQuery AutoComplete Widget

In this blog entry, we take a look at the ShieldUI jQuery Autocomplete widget. We will review some of its most important features and supply some examples of usage.

At first glance, the widget looks like this:


In the next paragraphs, we will look at some of the most important properties of the widget.

Templates

The control exposes a flexible template system, which allows the anything from minor visual changes to complete re-definition of each row in the auto-complete. This allows seamless integration into any scenario. In the example demonstrated to the right, this feature comes handy, as we are easily able to integrate country flags into a "country-search" scenario.

Data Binding

The Auto-complete widget is fully integrated with the ShieldUI DataSource control. This allows easy and intuitive binding to any datasource - local or remote. Additionally, this provides a unified API across widgets, when consuming data.
The following example demonstrates binding to a remote data-source and fetching of remote data, as the user types.

Keyboard Navigation

The Auto-complete control has a flexible set of keyboard navigation options. These are required, since many users prefer to use the arrow keys, or select on "Enter".
The following example shows some of the available options when using the keyboard.

Tags: 
Widgets