Typeahead Bloodhound Filter

Filter a Bloodhound dataset dynamically

by Ravindra Bajpai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div id="default-suggestions">
  <input class="typeahead" type="text" placeholder="NFL Teams">
</div>

JavaScript

var nflTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.team; },
  local: {'Detroit Lions': 'Detroit Lions', 'Green Bay Packers': 'Green Bay Packers', 'Chicago Bears': 'Chicago Bears'}
});

function nflTeamsWithDefaults(q, sync, async) {
  if (q === '') {
    sync(nflTeams.get('Detroit Lions', 'Green Bay Packers', 'Chicago Bears'));
  }

  else {
    nflTeams.search(q, sync);
  }
}

$('#default-suggestions .typeahead').typeahead({
  minLength: 0,
  highlight: true
},
{
  name: 'nfl-teams',
  display: 'team',
  source: nflTeamsWithDefaults
});