Не работает поиск по сайту js

Question

столкнулся с такой проблемой: есть скрипт, который выполняет поиск по странице, если он ищет элементы маркированного списка, то все работает корректно, но если поиск будет по дивам, то он не работает. Что нужно исправить, чтобы поиск осуществлялся для элементов div?

Разметка:

<div class="new">
         <input type = "text" id="elastic">
     </div>
     
        <div class = "elastic">
         <div class="product">Lorem</div>
         <div class="product">HEY</div>       
         
    </div>
     
 
     <script type="text/javascript" src="search.js"></script>

Скрипт:

document.querySelector('#elastic').oninput = function(){
    let val = this.value.trim();
    let elasticItems = document.querySelectorAll('.elastic div');
    if(val != ' '){
        elasticItems.forEach(function(elem){
            if(elem.innerText.search(val) == -1){
                elem.classList.add('hide');
                console.log(elasticItems);
            } else{
                elem.classList.remove('hide');   
            }
        });
    } else{
        elasticItems.forEach(function(elem){
            elem.classList.remove('hide');
        });
    }
}

Answer 1

document.querySelector('#elastic').oninput = function(){
    let val = this.value.trim().toLowerCase();
    let elasticItems = document.querySelectorAll('.elastic div');
    if(val !== ''){
        elasticItems.forEach(function(elem){
            elem.innerText.toLowerCase().includes(val)
                ? elem.classList.remove('hide')
                : elem.classList.add('hide');   
        });
    } else{
        elasticItems.forEach(elem => elem.classList.remove('hide'));
    }
}

.hide {
  display: none;
}

<div class="new">
         <input type = "text" id="elastic">
     </div>
     
        <div class = "elastic">
         <div class="product">Lorem</div>
         <div class="product">HEY</div>       
         
    </div>

БЛОГ НА HUSL

Не работает поиск по сайту js

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