If your web application needs a fully-featured queryable search box, typeahead.js can help. Some of its capabilities and features include:
- Search data on the client, server, or both
- Handle multiple inputs on a single page with shared data and caching
- Suggest multiple types of data (e.g. searches and accounts) in a single input
- Support for international languages, including right-to-left (RTL) and input method editors (IME)
- Define custom matching and ranking functions
- Grey text hints that help explain what hitting tab will do
It’s also optimized for large local datasets, so it's fast for high-latency networks.
We recommend you take a look at our examples page. There are three ways to get data:
Using local, hard-coded data passed on page render:
local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
Using a prefetch URL that will be hit to grab data on pageload and then stored in localStorage:
Or using a queryable API that returns results as-you-type (with the query being passed in the ?q= parameter):
You can also combine local or prefetch with a remote fallback for the performance of local data combined with the coverage of a remote query API (e.g. quickly search your friends but be able to find anyone on your site). There are lots of options for configuring everything from ranking, matching, rendering, templating engines, and more; check out the README for those details.
We initially built typeahead.js to support our needs; now we look forward to improvements and suggestions from the community. To learn more about how typeahead.js works, check out our detailed documentation. To stay in touch, follow @typeahead and submit issues on GitHub. Also, if building web application frameworks like typeahead.js interests you, why not consider joining the flock?
Typeahead.js was primarily authored by Tim Trueman (@timtrueman), Veljko Skarich (@vskarich) and Jake Harding (@jakeharding).
On behalf of the typeahead.js team,
- Chris Aniszczyk, Manager of Open Source (@cra)