全局预输入页脚和不匹配部分答案

【问题标题】：Global Typeahead Footer & No Match section全局预输入页脚和不匹配部分
【发布时间】：2014-03-30 17:50:37
【问题描述】：

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

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

如果所有远程数据集均未获取任何结果，则应显示“未找到结果”。这不应该显示任何 1 个远程源是否有数据。
如果有结果，我想在 typeahead 容器的页脚显示一个静态链接。如何在页脚显示链接？

我怎样才能做到这一点？我不确定如何继续。

有示例显示每个部分的页脚，而不是使用“空”和“页脚”类的整个容器。但它们是在数据集级别而不是全局级别。

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

与此类似的其他 SO 问题：

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

【问题讨论】：

标签： jquery typeahead.js twitter-typeahead

【解决方案1】：

你可以的

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

    }
});

【讨论】：

你有一个 jsfiddle 来说明这与问题相关的代码 Purus 的关系吗？
我会尝试添加一个 jsfiddle。无论如何，我使它适用于link
在提供的链接上，我看不到您在哪里工作。如果没有找到结果，我在链接中看到的预输入不会给出任何消息

【解决方案2】：

或者，您可以制作自定义侦听器并在 typehead 呈现内容时更改链接 href 属性。例如

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

其中 .typehead - 是您的打字头输入， .typehead__show-all-link - 显示更多结果的链接类

【讨论】：