Typeahead.js - prefetch dynamic php generated JSON

Question

I'm using Typeahead.js for my autosuggestions, my code is:

var job_scopes = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        url: 'http://www.domain.com/json.php?action=job_title&q=%QUERY'
    }
});

job_scopes.initialize();

This works fine, however I would like to change it to prefetch, to be able to use tokens in my JSON and leave returning results based on tokens on Bloodhound.

I cannot simply create static JSON, as I have the suggestion items added to the db all the time.

Is there a way to prefetch the json dynamically?

Answer 1

From the docs: "While it's possible to get away with it for smaller data sets, prefetched data isn't meant to contain entire data sets. Rather, it should act as a first-level cache for suggestions. If don't keep this warning in mind, you run the risk of hitting local storage limits."

https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#prefetch

I don't know how much data you are retrieving but it might be better to make an ajax call to get the data and then load that into your Bloodhound instance when you get the response.

Here is an example using a jQuery ajax call:

//Let's assume that the data you get back from the server is an array of objects
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}];

$.get( "http://example.com/your-data", function(data) {
  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });

  var dataset = {
    name: "My-dataset-name",
    displayKey: "value",
    source: bh.ttAdapter()
  };

  var ta = $(".typeahead").eq(0).typeahead(
    {
      hint: true
      highlight: true
      minLength: 1
    },
    datasetStates
    );
  ta.on('typeahead:selected', someFunctionToHandleEvent);
});

Hope this helps.