Неисправный поиск на 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 шт):
Не совсем понял вопрос. Но если я понял его правильно, то нужно повесить слушатель не на событие 'keyup' - а на событие 'change'.
searchInp.addEventListener('keyup', (e) => {
searchInp.addEventListener('input', (e) => {