Twitter Typeahead.js和返回两个列表而不是一个列表的远程URL

Question

我在twitter的typeahead.js文档中读到它可能有多个远程源。

我想知道是否有类似的方法，其中只有一个远程网址返回多个列表，

示例：

 //URL: Search?query=blah

 //returns this JSON:

 {
     error: false,
     persons = [
        {personId: 5, name: "John", surname: "Blah"},
        {personId: 12, name: "Blah", surname: "Edwards"},
     ],
     pets = [
        {petId: 534, petName: "Blah duck"},
        {petId: 123, petName: "Blah kitty"},
     ]
 }

如你所见，我的搜索者返回两个名单：人和宠物。在每个列表中都有包含查询词“Blah”

的项目

如何配置猎犬和先行者，以便这可以作为两个来源？但没有两个来源（因为每次会做两次ajax调用）

这就是我所拥有的，未知代码被评论

// Typeahead
headerSearchBloodhound = new Bloodhound({
    datumTokenizer: function (item) { 
          /* how can I tokenize in this case? */ 
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/Search',
        ajax: {
            beforeSend: function (xhr) {
                $(".searching-in-navbar").show();
            },
            data: {
                "query": $("#header-search").val(),
            }
        },
        filter: function (response) {
            $(".searching-in-navbar").hide();

            /* what should I return here if I have two lists rather than one? */
        }
    }
});

headerSearchBloodhound.initialize();

$("#header-search").typeahead({
    highlight: false,
    hint: true,
},
{
    name: 'headerSearch',
    displayKey: function (item) {
        /* 
             I want to display petName for pets and "name surname" for persons.
             How can I achieve that?
        */
    },
    source: headerSearchBloodhound.ttAdapter()
})
.on("typeahead:selected typeahead:autocompleted", function (e, item) {
    /*
        I want to redirect to /Persons/Details?personId=.. if it is a person
        or redirect to /Pets/Details?petId=.. if it is a pet.

        How do I achieve that?
    */
})
.on("typeahead:closed", function (e) {

    // Force lose focus
    $(":focus").blur();
    $(this).typeahead("val", "");
})
.on("typeahead:opened", function (e) { });

如您所见，评论的问题非常明确 我知道如何处理一个列表，但无法弄清楚处理两个列表的干净方法。

我希望生成的文本框如下：
http://twitter.github.io/typeahead.js/examples/#multiple-datasets

Answer 1

你需要在Bloodhound之外调用你的AJAX并创建两个。 这些方面的东西：

$(document).ready(function(e) {

    // Call your business layer
    $.ajax({
        url: 'Search.php',
        type: 'GET',
        data: {'query': 'blah'},
        success: function(jsonData) {

            // Create the typeahead
            createTypeahead(jsonData);
        }
    }); // end ajax call

});



function createTypeahead(jsonData){

    // constructs the suggestion engines
    var persons = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // `states` is an array of state names defined in "The Basics"
        local: $.map(jsonData.persons, function(state) { return { value: state }; })
    });
    var pets = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        // `states` is an array of state names defined in "The Basics"
        local: $.map(jsonData.pets, function(state) { return { value: state }; })
    });

    persons.initialize();
    pets.initialize();

    $("#header-search").typeahead({
            highlight: false,
            hint: true,
        },
        {
            name: 'persons',
            displayKey: 'persons',
            source: persons.ttAdapter(),
            templates: {
                header: '<h3 class="league-name">Persons</h3>'
            }

        },
        {
            name: 'pets',
            displayKey: 'pets',
            source: pets.ttAdapter(),
            templates: {
                header: '<h3 class="league-name">Pets</h3>'
            }

        }
    })
        .on("typeahead:selected typeahead:autocompleted", function (e, item) {
    })
        .on("typeahead:closed", function (e) {

            // Force lose focus
            $(":focus").blur();
            $(this).typeahead("val", "");
        })
            .on("typeahead:opened", function (e) { 
        }
    );
}