jQuery autocomplete with rotten tomatoes api

Question

I'm trying to use autocomplete for getting movie suggestion from rottentomatoes in JSON format. But the code below doesn't show any suggestion.

<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>

For the complete page source: https://gist.github.com/2018447 I also need to include the movie thumbnail in the suggestion list. Could anyone help me on this?

b[0] is undefined file://home/aaa/jqueryexample/js/jquery-ui-1.8.18.custom.min.js — rnk, Mar 11 '12 at 23:23
I've updated my answer to include poster thumbnails. This should solve your problem — Phil, Mar 11 '12 at 23:38

Phil · Accepted Answer · 2012-03-12T00:41:39.210

You had a syntax error (extra )) and were missing the call to iterate over the movies array (typically using $.map()).

This is what it should look like (update: includes poster thumbnails)

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

Working example here - http://jsfiddle.net/df7tp/6/

Yay! It's working. Thank you So much :) Btw.. Can I use **.data( "autocomplete" )._renderItem** to include thumbnail in the suggestion? For that, do I need to add image key in the response section? — rnk, Mar 11 '12 at 23:44
@rnk Just some left-over debugging. I've removed it but you should get familiar with your browser's development tools — Phil, Mar 12 '12 at 00:42
This is great! Do you have any thoughts on why this does not fully work on multiple inputs. I changed #sample to a class and added a few more in the jsfiddle. Works fine for the first one but does not show thumbnails for the other 3. You can see it here: http://jsfiddle.net/stueynet/D2upP/ — stueynet, May 12 '12 at 22:56

jQuery autocomplete with rotten tomatoes api

1 Answers1