examples

  1. The Basics
  2. ·
  3. Bloodhound
  4. ·
  5. Prefetch
  6. ·
  7. Remote
  8. ·
  9. Custom Templates
  10. ·
  11. Default Suggestions
  12. ·
  13. Multiple Datasets
  14. ·
  15. Scrollable Dropdown Menu
  16. ·
  17. RTL Support

The Basics

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.

Bloodhound (Suggestion Engine)

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.

Prefetch

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.

Remote

Remote data is only used when the data provided by local and prefetch is insufficient. In order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.

Custom Templates

Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead.

Default Suggestions

Default suggestions can be shown for empty queries by setting the minLength option to 0 and having the source return suggestions for empty queries.

Multiple Datasets

Scrollable Dropdown Menu

RTL Support