0

Есть список элементов, и живой поиск на 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>

2
  • 1
    var elasticItems = document.querySelectorAll('#list .parent'); — а добавить название класса вместо div ?) Child же тоже попадает под '#list div'. P.s. для текстового поиска можно (нужно) использовать innerText вместо innerHTML 24 авг 2019 в 16:09
  • Я знала, что дело в какой то мелочи, но эта мелочь как всегда самая важная))) Огромнейшее Вам спасибо, Вы сберегли мои нервы) 24 авг 2019 в 16:31

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.