Форум

grigori · #1 (**permalink**) 09.05.2021, 09:58

Здравствуйте, на сайте есть меню категорий в которых много подкатегорий. Для быстрого поиска нужной подкатегории был сделан поиск. В каждой категории есть свой input. Проблема в том, что поиск работает только из первого inputa первой категории. Из второго и следующих не работает.

<ul class="parent">
 <label><span>Томская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Томск</p>
  <p class='show'>Асино</p>
  <p class='show'>Молчаново</p>
  <p class='show'>Колпашево</p>
  <p class='show'>Стрежевой</p>
</ul>
<label><span>Новосибирская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Новосибирск</p>
  <p class='show'>Барабинск</p>
  <p class='show'>Куйбышев</p>
  <p class='show'>Бердск</p>
  <p class='show'>Ордынское</p>
</ul>
<label><span>Кемеровская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Кемерово</p>
  <p class='show'>Новокузнецк</p>
  <p class='show'>Междуреченск</p>
  <p class='show'>Прокопьевск</p>
  <p class='show'>Ленинск-Кузнецкий</p>
</ul>
</ul>
<style>
.hidden{
  display: none;
}

input{
  font-size:24px;
  margin-bottom:15px;
}

p{
  background-color: gray;
  color :white;
  font-size:18px;
  width:200px;
  padding:5px;
  margin: 3px;
}
</style>

$("body").on("keydown", "#filter-input", function() {
  var searchText =
      $("#filter-input")
  .val()
  .toLowerCase() || "___";
  $(".children > p").each(function(i) {
    var elem = $(this);
    if (
      elem
      .html()
      .toLowerCase()
      .indexOf(searchText) === -1
    ) {
      elem.addClass("hidden");
    } else {
      elem.removeClass("hidden");
    }
  });
});

рони · #2 (**permalink**) 09.05.2021, 10:07

Сообщение от grigori

поиск работает только из первого inputa

id не используют повторно!!! это индивидуальный номер, для однотипных элементов используют class.

рони · #3 (**permalink**) 09.05.2021, 10:26

grigori,

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
   <style>
.hidden{
  display: none;
}

input{
  font-size:24px;
  margin-bottom:15px;
}

p{
  background-color: gray;
  color :white;
  font-size:18px;
  width:200px;
  padding:5px;
  margin: 3px;
}
</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
$(document).on("input", ".filter-input", function() {
  var searchText = this.value.toLowerCase(); 
  $(".show", this.parentNode).each(function(i, elem) {
   var text = elem.textContent.toLowerCase();
   var notFound = searchText && text.indexOf(searchText) === -1;
   elem.classList.toggle("hidden", notFound)
  });
});
    </script>
</head>

<body>
<ul class="parent">
 <label><span>Томская</span></label>
<ul class='children'>
 <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Томск</p>
  <p class='show'>Асино</p>
  <p class='show'>Молчаново</p>
  <p class='show'>Колпашево</p>
  <p class='show'>Стрежевой</p>
</ul>
<label><span>Новосибирская</span></label>
<ul class='children'>
 <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Новосибирск</p>
  <p class='show'>Барабинск</p>
  <p class='show'>Куйбышев</p>
  <p class='show'>Бердск</p>
  <p class='show'>Ордынское</p>
</ul>
<label><span>Кемеровская</span></label>
<ul class='children'>
 <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Кемерово</p>
  <p class='show'>Новокузнецк</p>
  <p class='show'>Междуреченск</p>
  <p class='show'>Прокопьевск</p>
  <p class='show'>Ленинск-Кузнецкий</p>
</ul>
</ul>



</body>
</html>

grigori · #4 (**permalink**) 09.05.2021, 11:20

Это работает лучше, спасибо

Форум

Справочник

Discord чат

Курсы javascript