title: Twitter typeahead.js - grouped results with Hogan template?
body: <p>I am using (well, would like to use) typeahead.js to search my database by <em>brand name</em> and <em>model name</em> simultaneously, and display the selectable results grouped by brand name. I thought I could use a simple Mustache template to accomplish this, but I'm not having any luck.</p>
  
  <p>My current typeahead configuration:</p>
  
  <pre class="lang-js prettyprint-override"><code>myEl.typeahead({
      "name": "models-by-brand",
      "valueKey": "id",
      "remote": "/search/%QUERY",
      "template": '{{#brands}}' +
          '&lt;h4&gt;{{brand_name}}&lt;/h4&gt;' +
          '{{#models}}' +
          '&lt;p&gt;&lt;a href="#" class="pick-model" data-modelid="{{id}}"&gt;{{name}}&lt;/a&gt;&lt;/p&gt;' +
          '{{/models}}' +
          '{{/brands}}',
      "engine": Hogan
  });
  </code></pre>
  
  <p>The JSON returned from <code>/search/super</code>:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
      "brands": [
          {
              "brand_name": "Super Widgets",
              "models": [
                  {
                      "id": 1,
                      "name": "Crazy Widget"
                  }
              ]
          },
          {
              "brand_name": "Acme Widgets",
              "models": [
                  {
                      "id": 2,
                      "name": "Extra Super Widget"
                  },
                  {
                      "id": 2,
                      "name": "Double Super Widget"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>I want the typeahead output to be grouped by brand name and selectable by model name thusly:</p>
  
  <p><strong>Super Widgets</strong><br>
  <a href="http://example.com" rel="nofollow">Crazy Widget</a></p>
  
  <p><strong>Acme Widgets</strong><br>
  <a href="http://example.com" rel="nofollow">Extra Super Widget</a><br>
  <a href="http://example.com" rel="nofollow">Double Super Widget</a></p>
  
  <p>But apparently I can't use Hogan templates with typeahead in this manner (with nested blocks). Typeahead just displays one result with no text.</p>
  
  <p>I tried using a filter function with remote to format each datum, but this only got me a flat list of all the data - I couldn't figure out how to group the results.</p>
  
  <p>Is what I want possible with typeahead templates? Am I just missing something really obvious? I have control over the remote JSON result, so I can change that format if I need to. Thanks for any assistance.</p>