jQuery Autocomplete Plugin By Twitter - typeahead.js

jQuery Autocomplete Plugin By Twitter - typeahead.js
File Size: 123 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

typeahead.js is a javascript library inspired by Twitter's autocomplete search functionality for creating smart auto-complete form fields.

Main Features:

  • Displays suggestions to end-users as they type
  • Shows top suggestion as a hint (i.e. background text)
  • Works with hardcoded data as well as remote data
  • Rate-limits network requests to lighten the load
  • Allows for suggestions to be drawn from multiple datasets
  • Supports customized templates for suggestions
  • Plays nice with RTL languages and input method editors

You might also like:

Basic Usage:

(Prefetches data, stores it in localStorage, and searches it on the client)

1. Include typeahead CSS to style your plugin

<link rel="stylesheet" href="../releases/latest/typeahead.min.css">

2. Markup

<div class="demo">
          <input class="typeahead" type="text" placeholder="countries">

3. Include jQuery library and typeahead.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src=".typeahead.js"></script>

4. Call the plugin

$(document).ready(function() {
  $('.example-countries .typeahead').typeahead({
    name: 'countries',
    prefetch: '../data/countries.json',
    limit: 10

Change Log:

v0.10.4 (2014-07-14)

v0.10.3 (2014-07-12)

  • Bloodhound#clearPrefecthCache now works with cache keys that contain regex characters. 
  • Prevent outdated network requests from being sent. 
  • Add support to object tokenizers for multiple property tokenization. 
  • Fix broken jQuery#typeahead('val') method. 
  • Remove disabled attribute from the hint input control.
  • Add tt-highlight class to highlighted text. 
  • Handle non-string types that are passed to jQuery#typeahead('val', val).

v0.10.2 (2014-03-12)

  • update

v0.10.1 (2014-02-10)

  • hot fixes

v0.10.0 (2014-02-02)

  • update to the latest version.

v0.9.3 (2013-06-26)

  • Ensure cursor visibility in menus with overflow. 
  • Fixed bug that led to the menu staying open when it should have been closed.
  • Private browsing in Safari no longer breaks prefetch. 
  • Pressing tab while a suggestion is highlighted now results in a selection.
  • Dataset name is now passed as an argument for typeahead:selected event.

v0.9.2 (2013-04-15)

  • Prefetch usage no longer breaks when cookies are disabled.
  • Precompiled templates are now wrapped in the appropriate DOM element. 

v0.9.1 (2013-04-01)

  • Multiple requests no longer get sent for a query when datasets share a remote source. 
  • Datasets now support precompiled templates.
  • Cached remote suggestions now get rendered immediately.
  • Added typeahead:autocompleted event.
  • Added a plugin method for programmatically setting the query. Experimental.
  • Added minLength option for datasets. Experimental. 
  • Prefetch objects now support thumbprint option. Experimental. 

v0.9.0 (2013-03-24)

  • Implemented the triggering of custom events. 
  • Got rid of typeahead.css and now apply styling through JavaScript. 
  • Made the API more flexible and addressed a handful of remote issues by rewriting the transport component. 
  • Added support for dataset headers and footers. 
  • No longer cache unnamed datasets. 
  • Made the key name of the value property configurable. 
  • Input values set before initialization of typeaheads are now respected. 
  • Fixed an input value/hint casing bug. 

This awesome jQuery plugin is developed by twitter. For more Advanced Usages, please check the demo page or visit the official website.