JQuery автозаполнение с гнилой помидорами API - PullRequest
Новая
       17

JQuery автозаполнение с гнилой помидорами API

1 голос
/ 12 марта 2012

Я пытаюсь использовать автозаполнение для получения предложения фильма из гнилых томатов в формате 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 Мне также нужно включить миниатюру фильма в список предложений.Может ли кто-нибудь помочь мне в этом?

1 Ответ

4 голосов
/ 12 марта 2012

У вас была синтаксическая ошибка (дополнительно )), и вам не хватало вызова для перебора массива 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/

...