Question

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

以下是附加到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'。

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

1 个答案: