Неисправный поиск на JS

Всем привет!

Написал вот такой обработчик событий на <input> строки поиска:

searchInp.addEventListener('keyup', (e) => {

const searchString = e.target.value.toLowerCase().trim();
const trList = document.querySelectorAll('.table-body-items tr td');
let trArr = Array.from(trList);

if (searchString != '' ) {
  trArr.forEach (elem => {
     if (elem.innerText.toLowerCase().trim().search(searchString) == -1) {
        elem.classList.add('hide');
        
     }else {
        elem.classList.remove('hide');
     }
  });
}else {
  trArr.forEach (elem =>{
    elem.classList.remove('hide');
  });
 }
});

Поиск идет и он находит нужный мне элемент, но он удаляет класс hide, только после того как я полностью сотру вводимые данные из строки input'a.

Например, есть названия, которые содержат Air. Если добавлю к строке поиска какую-нибудь лишнюю букву, типа Airr или Airru то соответственно ничего не находит. Но когда я стираю до Air я ожидаю, что он покажет все элементы с такой подстрокой - но вместо этого ничего. А вот когда ещё одну букву стираю , типа было Air и стираю букву r (оставив в строке инпута Ai), то он вновь показывает элементы.

Как сделать так, чтобы он проверял не только каждый раз, когда я ввожу строку, но и когда стираю данные из строки input?


Ответы (2 шт):

Автор решения: Gremwiz

Не совсем понял вопрос. Но если я понял его правильно, то нужно повесить слушатель не на событие 'keyup' - а на событие 'change'.

→ Ссылка
Автор решения: Qwertiy
searchInp.addEventListener('keyup', (e) => {
searchInp.addEventListener('input', (e) => {
→ Ссылка