I want to return the data that matches the input value only.
But in this code, the result will apend after the data.
I'm stuck in 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>Clear the list's innerHTML when rendering to remove previously appended elements:
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>