Responsive JavaScript Auto Complete Component

Responsive JavaScript Auto Complete Component The Auto Complete type ahead component provides suggestions while the user types in the input field. The data source can be a JavaScript array, remote source (through Ajax, not available in the Lite version) or the options from a select drop down menu.

Features

  • Responsive & change layout automatically.
  • Small and easy to extend
  • Can use different values, display text and html display in the drop down menu
  • Multiple or single selection
  • Navigate through key press (up and down) or mouse scroll
  • Skinnable (using CSS).

Useful Links

Examples

Basic ng.AutoComplete View Code
In this example, we'll create a few different versions of the ng.AutoComplete components to show the different options.
From Select Menu: In this example, you can type in the numbers from the value or the label. For example, type t or 2


From a Simple Array:

From a Complex Array: In this example, the array indices contains and object with the following keys: "value", "text" and "html". The value key is the only required key and is the value submitted to the server. The text will be used in the input field and the html will be used as the drop down menu code. Type T, F, 1, 2 ...
Grouping Results View Code
In this example, we'll show how to add a group title or category into the results.
From Select Menu: Type A, B or C


From Source Array: Type A, B or C
Multiple Selection & Remote Data View Code
In this example, we'll show how to create a multiple selection options.
Sample Remote Data: //www.nogray.com/api/autocomplete_search.php?text=ng.cal&precaret=ng.c&postcaret=al&rand=1354936836770
From Select Menu: Type A, B or C


From Source Array: Type A, B or C
Get the Code
Download the latest version:
Download
API & Docs
View the complete API documentations and examples:
API & Docs
Licensing
We offer two types of licenses, personal and commercial. Find out more.
Donate
We thrive on your donations. If our scripts has helped, please donate.