All geek questions in one place

Display the total number of results using Typeahead.js prefetch

I use Typeahead.js with an implementation that is very similar to the "multiple datasets" found in 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 am using the latest version of Typeahead.js (v0.11.1). I am trying to add a footer at the bottom of the NHL team section, which has a total number of matching results. Something like <a href="...">Browse all ### results</a> . I can not find anywhere in the documentation where I can get the number of all hits from Bloodhound.

I have seen people do this with remote data sources, but my data source is small enough to be able to insert and cache, so I would like to use prefetching.

+5
source share
1 answer

I think your other code is fine, you just need to update the footer function as follows.

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

Check out this script.

+2
source

Source: https://habr.com/ru/post/1239439/

More articles:


All Articles