I am trying to implement a very basic search engine. I iterate through an array of objects, checking if my search term matches some attributes, and if it does, I push each matching object onto an array. Now, in the rest of my code I have it so each object is represented by an element, and each element has a checkbox. Each checkbox has an ID that matches its object’s ID. So…. when I run the search function, I take the matches, correspond them to a checkbox through the IDs, and then I want to hide the elements that don’t match.
The problem is: it hides ALL the elements, instead of just the non-matchings IDs. Furthermore, it works when I want to manipulate the matches (say, surround them in a white border). Thank you for your time I look forward to your input.
Blake
function search() {
var results = [];
userData.forEach(task => {
if (task.value.toLowerCase().includes(searchBar.value.toLowerCase())
|| task.note.toLowerCase().includes(searchBar.value.toLowerCase())) {
results.push(task.id);
}
})
const checkboxes = document.querySelectorAll(".checkbox");
checkboxes.forEach(checkbox => {
if (!results.includes(checkbox.id)) {
checkbox.parentElement.style.display = "none";
}
})
}
}