Question

我正在创建一个搜索建议，我想创建一个div并在其中添加全名，图像和...等建议元素。所以我的HTML代码中有一个空div，我的建议将被添加到它。

<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">

</div>

我希望在用户按输入类型键入时显示搜索建议。所以我创建了jQuery函数。我的jQuery函数是：

$('#base_main_search_box').keyup(function () {
    $.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
            $(addSuggestion).append('<div class="base_searchSuggestionItem">' +
                '<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
                '<div class="base_searchSuggestionItem_info">' +
                    '<p class="base_searchSuggestionItem_info_name">' +
                        '<a href="">' +
                            result.movie_names[0] +
                        '</a>' +
                        '(' +
                        result.movie_yearProduction[0] +
                        ')' +
                    '</p>' +
                    '<p class="base_searchSuggestionItem_info_description">' +
                        result.movie_descriptions[0] +
                    '</p>' +
                '</div>' +
            '</div>');
            console.log('final: '+addSuggestion.innerHTML);
        }
    }});
});

输出是：

"final: undefined"

这不正确。

Answer 1

根据docs

.html()在XML文档中不可用，因此您需要在设置或检查其HTML之前将其添加到DOM。

按以下步骤更改顺序

        $(addSuggestion).append(search_item);
        $(search_item).html(
            div_innerHTML
        );
        console.log('div_innerHTML: '+div_innerHTML);
        console.log('search_item: '+$(search_item).innerHTML);

附加jquery不起作用

1 个答案: