Questions tagged [typeahead.js]

Documentation can be found at https://github.com/twitter/typeahead.js/. typeahead.js has two main components, Typeahead and Bloodhound, whose docs can be found at https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md and https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md respectively.

Note: this project is currently not maintained. A maintained fork can be found at: https://github.com/corejavascript/typeahead.js

Stack Snippet Starter Pack

HTML

<link href="http://twitter.github.io/typeahead.js/css/examples.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="States of USA">

JavaScript

// some data to work with
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

// constructs the suggestion engine
var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: states
});


// initialize typeahead by passing in options and data
$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, 
{
  name: 'states',
  source: states
});