如何只返回结果？

Question

我只想返回与输入值匹配的数据。

但在这段代码中，结果将追加到数据之后。

我被list.append(div);卡住了

​

const list = document.querySelector(".list");
const filterInput = document.querySelector("#filter-input");
const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}];

renderData(data)

function renderData(data) {
    data.forEach(item => {
        const div = document.createElement("div");
        div.setAttribute("class", "item");
        div.innerHTML = `<div class="name">${item.name}</div>`;
        list.append(div);
    })
}

filterInput.addEventListener("input", e => {
    const keyword = e.target.value;
    let filteredData = data.filter(item => {
        return item.name.includes(keyword);
    });

    renderData(filteredData);
})

<input type="text" id="filter-input">
<div class="list"></div>

​

Answer 1

渲染时清除列表的innerHTML以删除先前附加的元素：

​

const list = document.querySelector(".list");
const filterInput = document.querySelector("#filter-input");
const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}];

renderData(data)

function renderData(data) {
    list.innerHTML = ""; //<-- clear innerHTML, remove appended elements
    data.forEach(item => {
        const div = document.createElement("div");
        div.setAttribute("class", "item");
        div.innerHTML = `<div class="name">${item.name}</div>`;
        list.append(div);
    })
}

filterInput.addEventListener("input", e => {
    const keyword = e.target.value;
    let filteredData = data.filter(item => {
        return item.name.includes(keyword);
    });

    renderData(filteredData);
})

<input type="text" id="filter-input">
<div class="list"></div>

​