Twitter Typeahead.js和返回兩個列表而不是一個的遠程URL

Question

我在twitter的typeahead.js文檔中看到，它可能有多個遠程源。

我想知道是否有類似的做法，其中有只有一個返回許多名單遠程URL，

例如：

//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」

我該如何配置bloodhound和typeahead以使其成爲兩個來源？但沒有有兩個來源

（因爲這會做兩個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

你需要打電話給你的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) { 
     } 
    ); 
}