Showing total results count using Typeahead.js's prefetch

Question

I'm using Typeahead.js with an implementation that looks very similar to the "multiple datasets" found in the examples:

var nbaTeams = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      prefetch: '../data/nba.json'
});

var nhlTeams = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      prefetch: '../data/nhl.json'
});

var footer = function (context) {
    // calculate total hits here
    return "<a href='...'>" + count + "</a>";
}

$('#multiple-datasets .typeahead').typeahead(null, {    
      name: 'nba-teams',
      display: 'team',
      source: nbaTeams,
      templates: {
          header: '<h3 class="league-name">NBA Teams</h3>'
      },
      limit: 3
    },
    {
      name: 'nhl-teams',
      display: 'team',
      source: nhlTeams,
      templates: {
          header: '<h3 class="league-name">NHL Teams</h3>',
          footer: footer
      },
      limit: 3
});

I'm using the latest version of Typeahead.js (v0.11.1). I'm trying to add a footer template to the bottom of the NHL teams section which has the total number of matching results. Something like <a href="...">Browse all ### results</a>. I can't find anywhere in the documentation where I can pull the count of total hits from Bloodhound.

I've seen people do this with remote data sources, but my data source is small enough to be pulled in and cached so I'd like to use prefetch.

Biographer

Answer 1

I think your other code is perfectly fine, you just need to update your footer function with following.

var footer = function (context) {
    // calculate total hits here
    return "<a href='#'>browse all <b>" + context.suggestions.length + "</b> results</a>";
}

Look at this fiddle.

Aerosol

When I type "a", it says "see all 1 results", yet there are 3 displayed on the screen. Additionally, there are probably ~20 results that have an a in them... I want the 20. – Biographer

For your first query, it says "see all 1 results" because your footer template is for your 2nd dataset and other two results are from 1st dataset. For your second query, It was a bug, plugin mathches only starting with tokes. If you want to match any character then you can find a solution here – Aerosol

I want to match any character across both data sets, not just the one that the footer is attached to. – Biographer

Okey got you, I have updated fiddle as per your requirements. It was bit tricky, look at the below fiddle and let me know if you have any query. jsfiddle.net/fxk401eg/5 – Aerosol

When you increase the limit on each typeahead to 20, and type c, you get 5 total results. I want to have my typeahead limited to 2 on the first section, and 1 on the third, and still show 5 "total results", instead of 3 "total results". The reasoning is that my search result page itself will have 5 results on it... I'm looking to implement "<a href=...>see all X results</a>" – Biographer

I am looking for the TOTAL number of results, not just the count which shows up in the typeahead. – Biographer