Question

每次搜索时，我都会尝试使用.replaceChild更新<li>列表。我正在返回一个JSON对象并将其转换为PHP中的数组。但是，使用我当前的代码，我得到：Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

JS：

function mainPageSearch() {
    var keyPressed = document.getElementById('main-page-search-input').value;
    xhr = new XMLHttpRequest;
    xhr.onload = function() {
        var result = JSON.parse(xhr.responseText);
        var suggestions = document.querySelectorAll('.main-page-search-predictions')[0];
        for(i=0; i<result.length; i++) {
            var a = document.createElement('li');
            a.innerHTML = result[i];
            suggestions.replaceChild(a, suggestions);
        }
    }
    xhr.open('POST', '/WEBSCRP/coursework/php/search.php?key='+keyPressed+'&func=mainsearch', true);
    xhr.send();

}

最初，我有.appendChild，但这有效，但没有覆盖以前的搜索结果。

Answer 1

您的.replaceChild()不正确，因为第二个参数必须是要替换的suggestions的子项。显然suggestions不能成为自己的孩子。

要替换子项，您需要指明要替换的子节点。否则怎么说呢？

如果您想清空列表，请在使用.appendChild()之前执行此操作：

suggestions.innerHTML = ""

或者在不使用.innerHTML的情况下清空方法，请执行以下操作：

while (suggestions.firstChild)
    suggestions.removeChild(suggestions.firstChild);

而且仅供参考，如果您只想要第一个结果，则不需要querySelectorAll。请改用querySelector。

var suggestions = document.querySelector('.main-page-search-predictions');

所以决赛看起来像这样：

var result = JSON.parse(xhr.responseText);
var suggestions = document.querySelector('.main-page-search-predictions');
suggestions.innerHTML = "";

for(i=0; i<result.length; i++) {
    suggestions.appendChild(document.createElement('li')).innerHTML = result[i];
}

我通过删除a变量来缩短它。

在预测搜索功能中使用replaceChild

1 个答案: