Auto Complete

Documentation updated on December 7th.

Description

The AutoComplete widget is a member of the Controls family. It works for input control. It can work as suggester while the user types in a input.

Demo

Code snippet

<form id="example_form" action="#" method="GET" class="ch-form">
	<div class="ch-form-row">
		<label for="autocomplete">Your country:</label>
		<input id="autocomplete"
                       type="text"
                       name="autocomplete"
                       placeholder="Search your country i.e. Argentina"
                       class="autoComplete_Example ch-autoComplete"
		/>
	</div>
</form>

Instance component

This is the way to create an AutoComplete as a suggestive:

var foo = $("#example").autoComplete({
	"url": "/suggest?q=",
	"jsonpCallback": "autoComplete"
});

Basics

Pushing data

The component executes the callback that returns to you the server service.

In the callback function you have to execute the suggest method.

Then, you have to give the data returned from the server to the function as parameter:

var autoComplete = function (SERVER_DATA) {
	foo.suggest(SERVER_DATA);
};

Response format

The data sent from server-side must be a simple array, containing the suggestions to be showed into widget results, for example:

["Aruba", "Armenia", "Argentina"]

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Auto Complete API documentation.

Learn more about events on our step-by-step guide.

Behavior

Getting suggestions

1. Write a word. The component will suggest you a list of options.
2. Focus the input with some text. The component will suggest you if it matches with any value.
3. Click an item after the component gives you suggestions. Its value will set to the input's value.
4. Select an item with the key Up arrow or the key Down arrow , then press the Enter key. Its value will set to the input's value.

Close the listing

1. Once the items are shown, click on the document. The list will closed and the component be off.
2. Press Esc to shutting off the component.

Highlight mouse and arrows

1. Use the key Up arrow or the keyDown arrow to select any item, then you move the mouse over the list. The new highlighted item will deselect the previous highlighted item.
2. Once the items are shown, move the mouse over the list to highlight any item. Then, stop the mouse movement and you use the key Up arrow . The previous item must be highlighted.