typeahead.js does not show results for array of JSON objects

Question

I'm using typeahead.js with Bloodhound to remote search through our products, but even though I do get a valid json response the empty template keeps being shown.

products = new Bloodhound(
  datumTokenizer: Bloodhound.tokenizers.whitespace
  queryTokenizer: Bloodhound.tokenizers.whitespace
  remote:
    url: '/search.json?search[q]=%QUERY'
    wildcard: '%QUERY'
)

$('#search_q').typeahead null,
  source: products.ttAdapter()
  templates:
    empty: '
      <div class="empty-message">
        Unable to find any results that match the current query
      </div>
    '
    suggestion: Handlebars.compile '
      <div>
        <strong>{{name}}</strong> – {{url}}
      </div>
    '

The server returns this JSON response on typing:

[
{"name":"Shankh Terracotta Tea Light Holder ","type":"Products","url":"/goods/6476/shankh-terracotta-tea-light-holder"},
{"name":"Tess Wallet ","type":"Products","url":"/goods/3587/tess-wallet"},
{"name":"Shankh Shaped Terracotta Handpainted Tea Light Holder","type":"Products","url":"/goods/19483/shankh-shaped-terracotta-handpainted-tea-light-holder"},
{"name":"Shankh Shaped Terracotta Handpainted Tea Light Holder","type":"Products","url":"/goods/19487/shankh-shaped-terracotta-handpainted-tea-light-holder"},
{"name":"Traditional Golden Tea Pot","type":"Products","url":"/goods/1341/traditional-golden-tea-pot"}
]