Jquery-UI 自动完成自定义数据 - 图像不会在自动完成的下拉列表中呈现

Question

我正在尝试在自动完成中显示自定义数据、电影海报和电影名称(通过 omdb api 请求)。但是动态添加的图像不会显示在浏览器中。

这是附加到 ul

的 HTML

<li class="ui-menu-item">
    <div id="ui-id-16" tabindex="-1" class="ui-menu-item-wrapper">
        <img scr="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxNzI0MDEzN15BMl5BanBnXkFtZTYwNjc1Njk5._V1_SX300.jpg" class="img-responsve img-thumbnail">
        <h3>The Devil Bat</h3>
        <span>(1940)</span>
   </div>
</li>

这是 codepen 上的完整代码 https://codepen.io/rishich/pen/aWOoJy

$("input").autocomplete({
autoFocus: true,
delay: 700,
source: function(request, response) {
    suggestions = [];
    console.log(request.term);
    $.getJSON('https://www.omdbapi.com/?type=movie&s=' + request.term, function(data, textStatus) {
        for (var i = 0; i < data.Search.length; i++) {
            suggestions.push(data.Search[i]);
        }
        console.log(suggestions);
        response(suggestions);
    });
},
}).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
        .append(
            "<div><img scr='"+item.Poster+"' class='img-responsve img-thumbnail'><h3>"+item.Title+"</h3><span>("+item.Year+")</span></div>"
        )
        .appendTo(ul);
};

Answer 1

将 src 属性拼错为“scr”。