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

富有的

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

这是附加到的 HTML 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>

这是 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);
};
富有的

src属性拼错为“scr”。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章