Skip to content

Guide · Open source

How to use typeahead.js: install, set up and customise autocomplete

Updated · written with AI from the project's own documentation and checked against our catalogue data

typeahead.js is a JavaScript library that adds autocomplete suggestions, often called typeaheads, to a text input on a web page. This guide is for web developers who want to add search suggestions to a site. After reading it you will know what the library is made of, how it is installed according to its README, what it requires, and where to find the detailed documentation for setup.

typeahead.jstwitter/typeahead.js · ★ 16.4k · MIT

Quick start

  1. 1Install the package. Run the Bower install command to fetch typeahead.js into your project.
  2. 2Include jQuery 1.9+. Load jQuery version 1.9 or later before the typeahead.js files, since both components depend on it.
  3. 3Choose your files. Use typeahead.bundle.js for both components, or load bloodhound.js and typeahead.jquery.js separately.
  4. 4Read the component docs. Open the Bloodhound and Typeahead documentation to learn the configuration options.
  5. 5Test in target browsers. Check the input in the desktop browsers you need, and test on mobile separately since the README says it is not tested there.

What typeahead.js is made of

typeahead.js has two components. Bloodhound is the suggestion engine: it computes suggestions for a given query. The UI view, called Typeahead, renders those suggestions and handles DOM interactions in the page.

Both components can be used separately. When used together, they provide a richer typeahead experience.

  • Bloodhound: suggestion engine, distributed as bloodhound.js
  • Typeahead: UI view, distributed as typeahead.jquery.js
  • Bundle: typeahead.bundle.js and typeahead.bundle.min.js include both

Install typeahead.js with Bower

The README says how you acquire typeahead.js is up to you, but Bower is its preferred method. Run the command below in your project.

  • Other methods listed in the README: download the zipball of the latest release, or download the dist files individually.
  • The README notes that bloodhound.js and typeahead.jquery.js depend on jQuery 1.9+, so include jQuery before them.
$ bower install typeahead.js

Check the requirements before you start

typeahead.js needs jQuery 1.9 or later for both the UI view and Bloodhound, according to the README. It is a code library, so you need to be comfortable writing JavaScript and editing your pages.

The README lists browser support as Chrome, Firefox 3.5+, Safari 4+, Internet Explorer 8+ and Opera 11+. It also states that the library is not tested on mobile browsers, so check mobile behaviour yourself if your audience uses phones.

  • jQuery 1.9+ (required by both components)
  • Desktop browsers listed in the README
  • Not tested on mobile browsers

Where to find setup and usage details

This guide does not reproduce the API. The README links to the documentation for each component: the Typeahead docs cover the jQuery UI view, and the Bloodhound docs cover the suggestion engine. A working examples page is also linked from the README.

If you are stuck, the README points to Stack Overflow with the typeahead.js tag for technical questions, and to GitHub issues for bugs.

  • Typeahead docs: doc/jquery_typeahead.md in the repository
  • Bloodhound docs: doc/bloodhound.md in the repository
  • Examples page on the project homepage

Build or test from source (for contributors)

If you want to contribute, the README says to install dev dependencies with npm and have grunt-cli installed. Tests use Jasmine and run with Karma, and the README says to run the suite with PhantomJS using npm test.

You do not need this section to use the library in a website.

  • grunt build: builds typeahead.js from source
  • grunt lint: runs JSHint on source and test files
  • grunt dev: runs grunt watch and grunt server in parallel
$ npm install $ npm install -g grunt-cli $ npm test

What people use it for

  • Adding search suggestions to the search box of a website
  • Adding autocomplete to a form field on an existing jQuery-based site
  • Maintaining an older site that must support legacy desktop browsers such as Internet Explorer 8+

Frequently asked questions

How do I install typeahead.js?

The README's preferred method is Bower. Run bower install typeahead.js in your project. The README also lists downloading the zipball or individual dist files as other options.

Does typeahead.js require jQuery?

Yes. The README says both bloodhound.js and typeahead.jquery.js depend on jQuery 1.9 or later. If your project does not use jQuery, the README suggests choosing a different library.

Is typeahead.js free to use?

typeahead.js is licensed under the MIT License, according to the README. Check the license file in the repository for the full terms.

Does typeahead.js work on mobile?

The README states that typeahead.js is not tested on mobile browsers. Test on the devices your users have before relying on it there.

What are the alternatives to typeahead.js?

The source lists Select2, Awesomplete and Algolia Autocomplete as comparable projects. Pick based on whether you use jQuery, need mobile support, or want a hosted service.

Where do I get help if something breaks?

The README suggests posting technical questions on Stack Overflow tagged typeahead.js, and reporting bugs as issues on the GitHub repository.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

typeahead.js suits web developers who already use jQuery and want a drop-in autocomplete component for desktop sites, including older browsers. It is a code library rather than a finished app, and the README says it is not tested on mobile, so teams needing mobile support or no jQuery should look at the comparable projects instead.

Install options & downloads