Fork Me on GitHub

Tiny Type-ahead

A tiny, lightweight, dependency-free, type-ahead search to attach to input fields.


The result is:

Downloads

CSS

The type-ahead results are added in a <div> element with the class typeahead-results. The div contains an ordered list <ol> containing list items <li> for each result. The selected list item has the class selected.

Examples

A simple example

In this example we have a small array of six airport names that we want to search through.

The result is:

Data objects

In this example we have a name and IATA code for each airport. We will rank the results with different weights depending on how we match.

The result is:

Load results from a separate file

Sometimes you may want to reduce initial page load or just have the searchable values in a separate file. This example loads results from a JSON file on the first key press. If the file is large, this can lead to a delay before the type-ahead results show up. It uses a custom function to define how the input text matches with each item; it matches on name, IATA, county and loc giving a higher weight if a field starts with the string than if it contains the string.


The result is:

Load results from a separate CSV file

Sometimes you may want to reduce initial page load or just have the searchable values in a separate file. This example loads results on the first key press. If the file is large, this can lead to a delay before the type-ahead results show up.


The result is: