RottenTomatoes API can't render synopsis

Question

I'm working with the RottenTomatoes movies API. I have the following code, but I can't seem to print out the movie's synopsis to the screen beneath the input. Any idea om what I'm doing wrong here?

See AJAX call example here: http://developer.rottentomatoes.com/docs

<formx>
    <input id="autocomplete" type="text" placeholder="Movie name" name="search">
</form>
<div id="search_results">

</div>
<script>
    $(function() {
        $("#autocomplete").autocomplete({
            delay: 500,
            minLength: 3,
            source: function(request, response) {
                $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?callback=?", {
                    apikey: "api_key_here",
                    q: request.term,
                    page_limit: 10
                }, function(data) {
                    // data is an array of objects and must be transformed for autocomplete to use
                    var array = data.error ? [] : $.map(data.movies, function(m) {
                        return {
                            label: m.title + " (" + m.year + ")",
                            url: m.links.alternate,
                            synopsis: m.synopsis
                        };
                    });
                    response(array);
                });
            },
            focus: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();

                document.write(ui.synopsis);
            },
            select: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();

                document.write(ui.synopsis);
            }
        });
    });
</script>

Answer 1

Your example should work with the exception of the ui.synopsis object calls. The jQueryUI ui object that is passed in actually doesn't refer to the result array item directly. Rather you have to use ui.item to access the original result item:

$("#autocomplete").autocomplete({
    delay: 500,
    minLength: 3,
    source: processed,
    focus: function (event, ui) {
        event.preventDefault();
        $('#search_results').text(ui.item.synopsis);
    },
    select: function (event, ui) {
        event.preventDefault();
    }
});

In the above example, I've removed the AJAX call completely and used the hard-coded response that you had supplied earlier. However the data manipulation/setup is still following the same logic as what you have above.

FIDDLE EXAMPLE: http://jsfiddle.net/Sta5N/