Typeahead.js is not updating the search index after requesting remote data.

I type a query, it fetches results, and then it always displays the first N items without respect to the query. I have used the bloodhound_inst.search('lemon', sync, async) function in the console and it's returning the entire remote dataset regardless of any text match.

For example this query will return 'apple', 'pizza', anything that comes back from the server.

I am expecting it to fetch remote data and then provide search results like normal. Is it expecting the remote to provide the correct data? I am just passing a test list of items from the server ['lemon', 'banana', 'apple', 'whatever'] as the response.

<script>
  var food_name= '<%= @food.name %>';

  var food_items = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '../food_item_search?food_name_q=%QUERY',
      wildcard: '%QUERY'
    }
  });

  var engine = food_items.initialize(true);

  $('.typeahead').typeahead(null, {
    limit: 7,
    source: food_items
  })

</script>