Question

我正在尝试使用OMDb API进行调用，当您拨打电话时，它会在电影上返回JSON数据。在使用自动完成功能搜索电影时。我正在获取电影名称。但我想显示附件中显示的结果。（附加图像，文件以突出显示的颜色，＆＃39;黄色＆＃39; ）。

我尝试了两种不同的类型，但无法获得附件中提到的预期结果。（在文件的底部）。

请查找代码 第一个代码 在这里，我也使用缓存。

<div>
    <label for="tags">Movies: </label>
    <input id="myText" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var cache = {};
        var getData = function (request, response) {    
            if (request.term in cache) {
                response($.map(cache, function (name, val) {
                    return {
                        label: name,
                        value: val
                    }
                }))
                return;
            }
            $.getJSON("http://www.omdbapi.com/?t=" + request.term,
                function (callback) {
                    cache[request.term] = callback.Title;
                    response($.map(callback, function (name, val) {
                        if (val == "Title") {
                            cache[request.term] = name;
                            return {
                                label: name,
                                value: val
                            }
                        }
                    }))
                });
        };    
        var selectItem = function (event, ui) {
            $("#myText").val(ui.item.label);
            return false;
        }
        $("#myText").autocomplete({
            source: getData,
            select: selectItem,
            minLength: 3
        });
    });
</script>

请参阅附件中的屏幕截图。键入少数名称并选择电影时，请查看另一个屏幕截图。我在这里遇到一个问题。我没有在搜索框中输入确切的数据。如您所见，我输入了“泰坦尼克号”，但缓存显示已搜索或匹配搜索条件的所有电影名称。

还附上第二段代码截图。

请告诉我如何在自动填充搜索框中显示带有电影标题和电影图像的结果。另外，如何在使用OMDb API加载页面时加载至少5-8部电影。搜索将返回我的结果以网格/表格格式。Image with all the screen shot attached

jquery ui自动完成远程数据源电影的文本框

0 个答案: