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

Question

我试图在自动完成，电影海报和电影名称（通过omdb apis请求）中显示自定义数据。但动态添加的图像不会显示在浏览器中。

下面是获得真实追加到ul

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

的HTML这里有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' 一个完整的代码。