jharding

[typeahead.js][gh-page]

Inspired by [twitter.com]'s autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

The typeahead.js library is built on top of 2 components: the data component,

jharding

// simple
// ------

$('.typeahead').typeahead({
  autoselect: true,
  hightlight: true,
  hint: true
}).typeahead('add', {
  name: 'films',
  source: {

jharding

<div class="example-countries">
  <input class="typeahead" type="text" placeholder="countries">
</div>

jharding

<div class="example-twitter-oss">
  <input class="typeahead" type="text" placeholder="open source projects by Twitter">
</div>

jharding

.example-arabic .tt-dropdown-menu {
  text-align: right;
}

jharding

<div class="example-sports">
  <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

jharding

<div class="example-films">
  <input class="typeahead" type="text" placeholder="best picture winner">
</div>

jharding

<div class="example-exclaimation">
  <input class="typeahead" type="text" placeholder="try it out">
</div>

jharding

<div class="example-numbers">
  <input class="typeahead" type="text" placeholder="numbers (one through ten)">
</div>

jharding

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'publish' ]
2 info using npm@1.3.24
3 info using node@v0.10.25
4 verbose publish [ '.' ]
5 verbose cache add [ '.', null ]
6 verbose cache add name=undefined spec="." args=[".",null]
7 verbose parsed url { protocol: null,
7 verbose parsed url   slashes: null,
7 verbose parsed url   auth: null,