Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поиск по тексту с нескольких input (https://javascript.ru/forum/jquery/82448-poisk-po-tekstu-s-neskolkikh-input.html)

grigori 09.05.2021 09:58

Поиск по тексту с нескольких input
 
Здравствуйте, на сайте есть меню категорий в которых много подкатегорий. Для быстрого поиска нужной подкатегории был сделан поиск. В каждой категории есть свой 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");
    }
  });
});

рони 09.05.2021 10:07

Цитата:

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

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

рони 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 09.05.2021 11:20

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


Часовой пояс GMT +3, время: 15:44.