typeahead example and bootstrap style

page.js

  travelerGlobal.usernames.initialize();

  $('#username').typeahead({
    minLength: 1,
    highlight: true,
    hint: true
  }, {
    name: 'usernames',
    display: 'displayName',
    limit: 20,
    source: travelerGlobal.usernames
  });

typeahead.css

/* twitter typeahead 0.11 styles */
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
  margin-bottom: 0;
}
.tt-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-cursor a {
  color: #fff;
}
.tt-suggestion p {
  margin: 0;
}

usernames.js

travelerGlobal.usernames = new Bloodhound({
  datumTokenizer: function (user) {
    return Bloodhound.tokenizers.whitespace(user.displayName);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function (user) {
    return user.displayName;
  },
  prefetch: {
    url: '/adusernames',
    cacheKey: 'adusernames'
  }
});