Autocomplete-jQuery

Autocomplete widget is the most popular widget nowadays; almost all commercial websites and search engines (e.g. Google, Yahoo, Bing, etc.) need it.  They are using it to make their websites user-friendly. 

  

The widget was initially designed to help handicapped peoples, who cannot type as effectively as a normal person can. You cannot learn spellings of every word; Autocomplete allows you to select a value, a words or a phrase by pressing minimal number of characters or keys of a keyboard.  It helps to type a word at a speed of speech, which is 1/10^th of the speed of actual typing of a word. Therefore, Autocomplete helps us to access the requisite value in a bare minimum time.

The widget suggests pre-populated values, which are entered in the data source of the programme to leverage their searching and filtering for its users. Such data source can also be created by users if they frequently enter some characters or values in the menu box.

                                                  

How can we create data source in Autocomplete – jQuery?

We can convert any field, where users can enter data, multi line text input control and contenteditable (editable or non-editable contents of an element) attributes, into an Autocomplete.

However, if Contenteditable attributes are not set on the element, the element will inherit it from its parent.

<element contenteditable="true|false|inherit">

§  If Contenditable is “True”, it means the content is editable, if it is “false”, it means the content is not editable and if it is “inherit”, it means that it is default value which is editable, if its immediate parent element is editable.

The above pre-populated values are called Tags and data source is a Java script array for the widget.  JSON (JavaScript Object Notation) is a low weight data interchange format which can transport data on low bandwidth networks.

Data Source in Autocomplete

                                                                

Two types of data sources are used in Autocomplete i.e. local or remote.  Local data source can be used for 50 entries only.  However, we should use remote data source for more than 50 entries.  If the menu is open, the data/entries fetched by the relevant data source can be scrolled, selected or focused with the keyboard controls like: up, down, escape, enter, tab, page up and page down.  However, if the menu is closed, we can use keyboard controls like: up and down.

Such data source - local or remote - can also be created by users, if some characters or values are frequently entered in the menu box.  

When menu is open, the following key commands are available on key board to focus the pre-populated values:

• PAGE UP/PAGE DOWN: Scroll up and drown through a page of items.
• UP: The command moves focus to the previous item. If you are on the first item and you press 'Up’,it will spotlight ‘input’. If you are on the input and you press “Up’, it will spotlight the last item.
• DOWN: The command allows move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.
• ESCAPE: Close the menu.
• ENTER: Select the currently focused item and close the menu.
• TAB: Select the currently focused item, close the menu, and move focus to the next focusable element.

When the menu is closed, the following key commands are available:

• UP/DOWN: Open the menu, if the min.length has been met. The min.length is no. of characters; a user must type to search.  Minimum length of Zero is ideal for few items and large numbers shall be used when there is possibility that a character can match thousands of items.

Styling in Autocomplete

The feel, style and look of the widget can be improved UI CSS Framework. We can download the required theme from the theme roller, where we can set the font, corner radius, header and content with their background colours and textures, etc.