javascript - typeahead.js 和 API themoviedb

Question

我想将 themoviedb API 与 typeahead(BootStrap 框架)一起使用，但我因使用该 API 而被阻止...

我有这段代码:

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

它将在我的控制台中返回 JSON 格式，但我不理解预输入集成... 但是，我按照这个例子 http://twitter.github.io/typeahead.js/examples/没有想法

好像是这样的？

$('.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
  }
]);

感谢您的帮助...:)

Answer 1

您编写的代码被“阻止”，因为查询 themoviedb API 意味着您的代码将发出跨域请求。这些默认情况下被阻止，但您可以通过发出 JSONP 请求来解决此问题。

我在这里创建了一个使用 TheMovieDb API 的 Typeahead.js 的工作示例:

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

实现typeahead控件的代码是:

$('#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'
    }
});

更新

请注意，此答案适用于 Typeahead 版本 0.9.3。 typeahead 版本 0.10.0 的更新版本使用了名为 Bloodhound 的建议引擎，可以在 here 中找到。 .