Есть список элементов, и живой поиск на js.
Вопрос:
Почему когда родительский элемент (class="parent"
) находит в поиске, то его дочерний элемент (class="child"
) не отображается?
Как сделать видимым и родителя и дочерний элемент?
Бьюсь с этой проблемой уже 3 сутки, в интернете ответа не нашла, пожалуйста подскажите как реализовать?
Спасибо!
document.querySelector('#search').oninput = function() {
var val = this.value.trim();
var elasticItems = document.querySelectorAll('#list .child');
if (!val) {
elasticItems.forEach(function(elem) {
if (elem.innerText.toLowerCase().search(val) == -1 && elem.innerText.search(val) == -1) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
console.log(elem.innerHTML);
}
});
} else {
elasticItems.forEach(function(elem) {
elem.style.display = 'block';
});
}
}
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#main {
margin: 0 auto;
width: 300px;
height: 30px;
}
#search {
width: 296px;
height: 30px;
}
#list {
width: 300px;
height: 500px;
background: #c3c7cd;
margin: 0 auto;
padding: 15px 0px 15px 10px;
box-sizing: border-box;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.parent {
border: 1px solid #000000;
width: 280px;
height: 50px;
font-family: Arial, sans-serif;
font-size: 16px;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.child {
font-family: Arial, sans-serif;
font-size: 14px;
color: #274bc8;
}
<div id="main">
<input type="text" id="search">
</div>
<div id="list">
<div class="parent">Пицца
<div class="child">Еда</div>
</div>
<div class="parent">Булочка
<div class="child">Еда</div>
</div>
<div class="parent">Хлеб
<div class="child">Еда</div>
</div>
<!--Автомобили-->
<div class="parent">Шевроле
<div class="child">Автомобили</div>
</div>
<div class="parent">Мерседес
<div class="child">Автомобили</div>
</div>
<div class="parent">Шкода
<div class="child">Автомобили</div>
</div>
<!--Одежда-->
<div class="parent">Джинсы
<div class="child">Одежда</div>
</div>
<div class="parent">Майки
<div class="child">Одежда</div>
</div>
<div class="parent">Куртки
<div class="child">Одежда</div>
</div>
</div>
var elasticItems = document.querySelectorAll('#list .parent');
— а добавить название класса вместо div ?) Child же тоже попадает под'#list div'
. P.s. для текстового поиска можно (нужно) использовать innerText вместо innerHTML