Multiple datasets not working with Twitter Typeahead/Bloodhound when remote data source is used

Question

The Twitter Typeahead examples page show how to use multiple datasets with Typeahead. Here is working example code using the local data source option:

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

If you try out the above JSFIDDLE by typing in the input on the page, you'll see that the two datasets are shown in the typeahead dropdown.

The problem I'm facing is that if I change the data source to remote, only the second dataset is shown in the dropdown. I've simplified my remote code (which actually sends the query using POST instead of get) and you can see it here:

JSFIDDLE

If you try this JSFIDDLE, you'll see that only the second dataset is shown in the typeahead dropdown. if you view the network traffic when typing in the input, you'll see that only one AJAX request is made, when it should be two (one for each dataset).

When I view the network traffic on my website (with my real code), it also shows that a request is only made for the second dataset. So, for some reason, Typeahead/Bloodhound is only making a request for the second dataset instead of one for each dataset. It also only displays results (or lack thereof) for the second dataset, instead of for each dataset.

Why don't multiple datasets work when using the remote data source option?

Answer 1

This actually appears to be a bug with the latest version of Typahead (0.10.3), because I tried my code with 0.10.2 and it works fine. I filed a bug report here.

I guess I'll leave my Q&A in case it helps someone else.