Global Typeahead Footer&No Match部分

Pur*_*rus 5 jquery typeahead.js twitter-typeahead

我正在使用多个远程数据集来获取Typeahead插件的数据.一切正常.

现在我正在努力实现两件事

  1. 如果所有远程数据集都未获取任何结果,则应显示"未找到结果".如果任何1个远程源有数据,则不应显示此信息.

  2. 如果有结果,我想在typeahead容器的页脚显示一个静态链接.如何在页脚显示链接?

我怎样才能做到这一点?我不知道该怎么办.

有一些示例显示每个部分的页脚,而不是使用"空"和"页脚"类的整个容器.但它们在数据集级别而不是全局.

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

与此类似的其他SO问题:

打字下拉列表中的全局页脚

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>'
  }
});
Run Code Online (Sandbox Code Playgroud)

小智 3

你可以做

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

    }
});
Run Code Online (Sandbox Code Playgroud)