RottenTomatoes API无法呈现概要

时间:2014-05-14 18:20:31

标签: jquery ajax json

我正在使用RottenTomatoes电影API。我有以下代码,但我似乎无法将电影的概要打印到输入下面的屏幕。我知道我在这里做错了吗?

请参阅此处的AJAX调用示例: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>

1 个答案:

答案 0 :(得分:1)

除了ui.synopsis对象调用之外,您的示例应该可以使用。传入的jQueryUI ui对象实际上并不直接引用结果数组项。相反,您必须使用ui.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();
    }
});

在上面的示例中,我完全删除了AJAX调用,并使用了之前提供的硬编码响应。但是,数据操作/设置仍然遵循与上面相同的逻辑。

FIDDLE示例:http://jsfiddle.net/Sta5N/