CODEWITHSUNDEEP
jquerytypeahead.jstwitter-typeahead
Purus
Purus

Reputation: 5799

Global Typeahead Footer & No Match section

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>'
  }
});

Upvotes: 5

Views: 2404

Answers (2)

jsHate
jsHate

Reputation: 599

Alternatively you can make custom listener and change the link href attribute when typehead is rendering stuff. For example

$('.typeahead').bind('typeahead:render', function() {
        $('.typehead__show-all-link').attr('href', '/search?q='+ $('.tt-input').val());
    });

where .typehead - is your typehead input, .typehead__show-all-link - the link class for show more results

Upvotes: 0

poramo
poramo

Reputation: 572

You can do

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

    }
});

Upvotes: 3

Related Questions