title: How to use multiple datasets in one go with Typeahead and Bloodhound?
body: <p>I'm trying to use Typeahead/Bloodhound for suggestions and search. For simplicity's sake, let's assume I have two types of model objects - <strong>Country</strong> and <strong>City</strong>.</p>
  
  <pre><code>public class Country
  {
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>(Server-side is in ASP.NET, but that's irrelevant for the question).</p>
  
  <p>City is practically the same as Country, except with a different name.</p>
  
  <p>Anyway, before styling, I expect the end result to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uK8A1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uK8A1.jpg" alt="bloodhound multiple datasets"></a></p>
  
  <p>(If it's not obvious, I've written "AL" in the textbox, the remaining letters form the first suggestion)</p>
  
  <p>And I'm able to achieve this easily by using multiple Bloodhounds:</p>
  
  <pre><code>var countries = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      limit: 5,
      remote: {
          url: 'http://localhost:5000/api/countries/%QUERY',
          wildcard: '%QUERY'
      }
  });
  
  var cities = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      limit: 5,
      remote: {
          url: 'http://localhost:5000/api/cities/%QUERY',
          wildcard: '%QUERY'
      }
  });
  </code></pre>
  
  <p>and multiple input objects to typeahead: </p>
  
  <pre><code>$('#remote .typeahead').typeahead(null,
      {
          name: 'countries',
          display: 'name',
          source: countries,
          templates: {
              empty: [
                  '&lt;div class="empty-message"&gt;',
                  'unable to find any countries that match the current query',
                  '&lt;/div&gt;'
              ].join('\n'),
              suggestion: Handlebars.compile('&lt;div&gt;&lt;strong&gt;{{name}}&lt;/strong&gt;&lt;/div&gt;'),
              header: '&lt;h2&gt;Countries&lt;/h2&gt;'
          }
  
      },
      {
          name: 'cities',
          display: 'name',
          source: cities,
          templates: {
              empty: [
                  '&lt;div class="empty-message"&gt;',
                  'unable to find any cities that match the current query',
                  '&lt;/div&gt;'
              ].join('\n'),
              suggestion: Handlebars.compile('&lt;div&gt;&lt;strong&gt;{{name}}&lt;/strong&gt;&lt;/div&gt;'),
              header: '&lt;h2&gt;Cities&lt;/h2&gt;'
          }
  
      });
  </code></pre>
  
  <p>However, in my real-world scenario, I have about 10 datasets. Creating 10 separate queries, combined with JSON serialization/deserialization sould probably kill my servers on the spot, especially with multiple users.</p>
  
  <p>What I'd prefer is to have a composite DTO:</p>
  
  <pre><code>public class CompositeSearchResult
  {
      public List&lt;Country&gt; Countries { get; set; }
      public List&lt;City&gt; Cities { get; set; }
      //... and many others
  }
  </code></pre>
  
  <p>... while somehow handling the complex object on the client with Bloodhound. Is this possible?</p>