Twitter Typeahead.js Bloodhound remote returns undefined

Question

Unable to get Twitter Typeahead.js, remote version to work. I get "undefined" for my suggestions. Any help would be appreciated.

Code below:

JS:

var films = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: '../widgets/films.json'
});

films.initialize();

$('#films .typeahead').typeahead(null, {
    name: 'films',
    displayKey: 'value',
    source: films.ttAdapter()
});

Answer 1

The Bloodhound suggestion mechanism cannot find the "value" of the display key in your JSON array.

You need to convert the JSON array to an array of JavaScript objects. JavaScript objects have a variable called "value" that has the name of the movie as a value; this is the value variable that is used by the display key, for example.

remote: {
        url: '../widgets/films.json',
        filter: function (films) {
            // $.map converts the JSON array into a JavaScript array
            return $.map(films.results, function (film) {
                return {
                    // NB : replace original_title below with your JSON film key
                    value: film.original_title
                };
            });
        }
    }

, film.json( , ).

. jsfiddle.