Global Typeahead Footer & No Match section

Question

I am using multiple remote datasets to get data for the Typeahead plugin. All works fine.

Now I am trying to achieve 2 things

1. If all the remote datasets does not fetch any results, "No results found" should be shown. This should not show if any 1 remote source has data.

2. I want to show a static link at the footer of the typeahead container if there are results. How can I get to show a link at the footer?

How can I achieve this? I am not sure how to proceed.

There are examples to show footer for each section and not for the entire container using "empty" and "footer" class. But they are on the dataset level and not globally.

Link : https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

Other SO questions similar to this:

Global footer in typeahead dropdown

var nbaTeams = new Bloodhound({
   datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   remote: '../data/nba.json'
});

var nhlTeams = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '../data/nhl.json'
});

nbaTeams.initialize();
nhlTeams.initialize();

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

Answer 1

You can do

$('.typeahed').typeahed(null, {
    name: 'suggestions',
    templates: {
        footer: Handlebars.compile('Results for {{ query }}'),
        empty: Handlebars.compile('<strong>Not Results for found.</strong>')

    }
});