Typeahead / Autocomplete Plugin

Typeahead.js

Typeahead.js provides a powerful autocomplete with bloodhound suggestion engine. It supports local datasets and remote endpoints.

Example

<script src="https://cdn.jsdelivr.net/npm/typeahead.js/dist/typeahead.bundle.min.js"></script>

<script>
const countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: { url: "/api/countries?q=%QUERY", wildcard: "%QUERY" }
});

$("#country-input").typeahead(
  { hint: true, highlight: true, minLength: 1 },
  { name: "countries", display: "name", source: countries }
);
</script>

JAVASCRIPT

Full Editor

Pro Tip

Bloodhound caches remote results locally to reduce AJAX requests on repeated searches.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned