1

Twitter の Typeahead の例のページには、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 を試すと、2 つのデータセットが先行入力ドロップダウンに表示されることがわかります。

私が直面している問題は、データ ソースを に変更するとremote、2 番目のデータセットのみがドロップダウンに表示されることです。コードを簡略化しましたremote(実際には、get ではなく POST を使用してクエリを送信します)。ここで確認できます。

JSFIDDLE

このJSFIDDLEを試すと、先行入力ドロップダウンに 2 番目のデータセットのみが表示されることがわかります。入力を入力するときにネットワーク トラフィックを表示すると、AJAX 要求が 2 つ (データセットごとに 1 つ) あるはずなのに、1 つしか作成されていないことがわかります。

Web サイトでネットワーク トラフィックを (実際のコードを使用して) 表示すると、2 番目のデータセットに対してのみ要求が行われていることがわかります。したがって、何らかの理由で、Typeahead/Bloodhound は、各データセットに対して 1 つではなく、2 番目のデータセットに対してのみ要求を行っています。また、各データセットではなく、2 番目のデータセットの結果 (またはその欠如) のみを表示します。

remoteデータ ソース オプションを使用すると、複数のデータセットが機能しないのはなぜですか?

4

1 に答える 1