typeahead.js and API themoviedb

Question

I would like to use the themoviedb API with typeahead (BootStrap framework), but i was blocked for using the API...

I have this code :

http://jsfiddle.net/koff75/uAXtd/

It will return in my console the JSON format, but i don't understand the typeahead integration... But, I follow this examples http://twitter.github.io/typeahead.js/examples/ whithout idea

It seems to be like this ?

$('.example-films .typeahead').typeahead([
  {
    name: 'best-picture-winners',
    remote: '../data/films/queries/%QUERY.json',
    prefetch: '../data/films/post_1960.json',
    template: '<p><strong>{{value}}</strong> – {{year}}</p>',
    engine: Hogan
  }
]);

Thanks for your help... :)

Answer 1

The code you wrote was "blocked" as querying themoviedb API meant that your code would be making a cross domain request. These are blocked by default but you can get around this problem by making a JSONP request.

I've created a working example of Typeahead.js which uses TheMovieDb API here:

http://jsfiddle.net/Fresh/5ND8W/

The code to implement the typeahead control is:

$('#movies').typeahead({
    displayKey: 'value',
    header: '<b>Movie suggestions...</b>',
    limit: 10,
    minLength: 3,
    remote: {
        url : 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (parsedResponse) {               
            retval = [];
            for (var i = 0;  i < parsedResponse.results.length;  i++) {
                retval.push({
                    value: parsedResponse.results[i].original_title,
                    tokens: [parsedResponse.results[i].original_title]
                });
            }
            return retval;
        },
        dataType: 'jsonp'
    }
});

UPDATE

Note that this answer is for Typeahead version 0.9.3. A more up to date version for typeahead version 0.10.0, which makes use of a suggestion engine called Bloodhound, can be found here.