Автозаполнение jQuery с api тухлых помидоров

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


javascript jquery jquery-ui jquery-autocomplete rotten-tomatoes
person rnk    schedule 11.03.2012    source источник
comment
Что говорит ваша консоль ошибок?   -  person Phil    schedule 12.03.2012
comment
b [0] - это неопределенный файл: //home/aaa/jqueryexample/js/jquery-ui-1.8.18.custom.min.js   -  person rnk    schedule 12.03.2012
comment
Я обновил свой ответ, включив в него эскизы плакатов. Это должно решить вашу проблему   -  person Phil    schedule 12.03.2012

Ответы (1)


arrow_upward
4
arrow_downward

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

person Phil    schedule 11.03.2012
comment
Ура! Работает. Большое спасибо :) Кстати .. Могу ли я использовать .data (autocomplete) ._ renderItem, чтобы включить миниатюру в предложение? Для этого мне нужно добавить ключ изображения в раздел ответа? - person rnk; 12.03.2012
comment
Спасибо, @Phil. Выглядит прекрасно! - person rnk; 12.03.2012
comment
@rnk Просто небольшая отладка. Я удалил его, но вам следует ознакомиться с инструментами разработки вашего браузера. - person Phil; 12.03.2012
comment
Отлично! Есть ли у вас какие-либо мысли о том, почему это не работает в полной мере на нескольких входах? Я изменил #sample на класс и добавил еще несколько в jsfiddle. Работает нормально для первого, но не показывает эскизы для другого 3. Его можно увидеть здесь: jsfiddle.net / stueynet / D2upP - person stueynet; 13.05.2012