You should listen to the input
& change
event instead of the keyup event. This approach ensures that the functionality works even when text is pasted from the clipboard, as shown below:
document.getElementById("search").addEventListener("input", e => {
const query = e.target.value.toLowerCase();
for (const tr of trs) {
tr.style.display = tr.innerText.toLowerCase().includes(query) ? "" : "none";
}
});
document.getElementById("search").addEventListener("change", e => {
const query = e.target.value.toLowerCase();
for (const tr of trs) {
tr.style.display = tr.innerText.toLowerCase().includes(query) ? "" : "none";
}
});
To better capture additional fallback events, consider reviewing this answer. It provides a detailed description of the most important events you need to know. Check it out: