javascript - 带有烂番茄api的jQuery自动完成功能

Question

我正在尝试使用自动完成功能从 rottentomatoes 以 JSON 格式获取电影建议。但是下面的代码没有显示任何建议。

<script>
var apikey = "5xq9w7z2mp7a6cnchkfy52yd";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = "Rocky";

$(document).ready(function() {
$("#sample").autocomplete({
source: function( request, response ) {
         $.ajax({
           url: moviesSearchUrl + '&q=' + encodeURI(query),
           dataType: "jsonp",
           success: function(data) {
                     var movies = data.movies;
                     response(function(movies) {
                               return {
                                      label: movies.title,
                                      value: movies.title
                                      }
                     }));           
                    }
         });
        }
});
});
</script>

对于完整的页面源：https ://gist.github.com/2018447 我还需要在建议列表中包含电影缩略图。有人可以帮我吗？

Answer 1

您有一个语法错误（额外的)）并且缺少对数组进行迭代的调用movies（通常使用$.map()）。

这就是它的样子（更新：包括海报缩略图）

$("#sample").autocomplete({
    source: function( request, response ) {
        $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
            data: {
                apikey: apikey,
                q: request.term
            },
            dataType: "jsonp",
            success: function(data) {
                response($.map(data.movies, function(movie) {
                    return {
                        label: movie.title,
                        value: movie.title,
                        thumb: movie.posters.thumbnail
                    }
                }));           
            }
        });
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    var img = $("<img>").attr("src", item.thumb);
    var link = $("<a>").text(item.label).prepend(img);
    return $("<li>")
        .data( "item.autocomplete", item )
        .append(link)
        .appendTo(ul);
};
​

这里的工作示例 - http://jsfiddle.net/df7tp/6/