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.
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.
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.
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.