Typeahead Bloodhound Autocomplete using prefetch + remote when source is a dict from Django

Question

Bloodhound variable for Typeahead that's working nicely:

var egDjangoVar = new Bloodhound({
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  remote: {
    url: '/ajax/eg/%QUERY.json', 
    wildcard: '%QUERY',
    filter: filterdata
  }
});

We added dict parsing function filter: filterdata because Django requires JSON to be sent as a dict for security:

function filterdata(data){
      return $.map(data.results, function(results,index){
        return results.value;
      })
    }

All works beautifully. We now want Prefetch functionality and have added:

prefetch: {
    url: '/ajax/prefetch.json',
    wildcard: '%QUERY',
    filter: filterdata
  },

This doesn't work, despite '/ajax/prefetch.json' serving expected dict. We think it may be due to dataTokenizer issues discussed in this answer, but we don't understand why the tokenizer should differ between remote and prefetch sources, and the suggested datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value)}; didn't work when adding it as an argument of prefetch.

We've found that __/ajax/prefetch.json__data in local storage is saved with dict keys matching values like {"datums":{"Apple":"Apple","Banana":"Banana","Orange":"Orange"},"trie":{"i":[],"c":{}}}, whereas the remote data directly viewed is like {"results": [{"value": "Apple"}, {"value": "Banana"}, {"value": "Orange"}]}. Is this unexpected?

I'm new to front end / JS, so please forgive me if this is a stupid question. What are we doing wrong?

Omaomaha

Answer 1

Figured it out: the filter function should return results instead of results.value.

display:'value' was also missing from the Typeahead initialization (where Bloodhound variable is given to source).

Omaomaha