Question

Twitter Typeahead examples page显示了如何将多个数据集与Typeahead一起使用。以下是使用local数据源选项的示例代码：

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: []
});

var nhlTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: []
});

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

$('#multiple-datasets .typeahead').typeahead({
        highlight: true
    },
    {
        name: 'nba-teams',
        displayKey: 'team',
        source: nbaTeams.ttAdapter(),
        templates: {
            empty: [
                '<div class="tt-empty-message">',
                'No Results',
                '</div>'
            ].join('\n'),
            header: '<h3 class="tt-tag-heading tt-tag-heading2">1</h3>'
        }
    },
    {
        name: 'nhl-teams',
        displayKey: 'team',
        source: nhlTeams.ttAdapter(),
        templates: {
            empty: [
                '<div class="tt-empty-message">',
                'No Results',
                '</div>'
            ].join('\n'),
            header: '<h3 class="tt-tag-heading tt-tag-heading2">2</h3>'
        }
    });

JSFIDDLE

如果您通过在页面上输入输入来尝试上面的JSFIDDLE，您将看到两个数据集显示在typeahead下拉列表中。

我面临的问题是，如果我将数据源更改为remote，则只会在下拉列表中显示第二个数据集。我已经简化了我的remote代码（它实际上是使用POST而不是get来发送查询），你可以在这里看到它：

JSFIDDLE

如果你尝试这个 JSFIDDLE，你会看到只有第二个数据集显示在typeahead下拉列表中。如果您在键入输入时查看网络流量，您将看到只有一个AJAX请求，当它应该是两个（每个数据集一个）。

当我查看我网站上的网络流量（使用我的真实代码）时，它还会显示仅针对第二个数据集发出请求。因此，出于某种原因，Typeahead / Bloodhound仅针对每个数据集请求第二个数据集而不是一个。它还仅显示第二个数据集的结果（或缺少结果），而不是每个数据集的结果。

使用remote数据源选项时，为什么多个数据集不起作用？

Answer 1

这实际上似乎是最新版本的Typahead（0.10.3）的一个错误，因为我用0.10.2尝试了我的代码并且它工作正常。 I filed a bug report here。

我想我会离开我的Q＆amp; A以防其他人帮忙。

使用远程数据源时，多个数据集无法使用Twitter Typeahead / Bloodhound

1 个答案: