typeahead.js

official github

html

html

Link all the typeahead js files.

js

An array named cars.
demo 1 is using the typeahead to select substring.

When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query.

js

demo 2 uses the bloodhound engine searching the array list.

For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine.

Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.

js

demo 3 is using the prefetch to preload the json data. 

Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.

There are also other ways like remote or costumer fetch data.
more examples