Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2021, 09:58
Новичок на форуме
Отправить личное сообщение для grigori Посмотреть профиль Найти все сообщения от grigori
 
Регистрация: 13.07.2013
Сообщений: 5

Поиск по тексту с нескольких 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");
    }
  });
});
Ответить с цитированием
  #2 (permalink)  
Старый 09.05.2021, 10:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,664

Сообщение от grigori
поиск работает только из первого inputa
id не используют повторно!!! это индивидуальный номер, для однотипных элементов используют class.
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2021, 10:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,664

поиск текста в блоке
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>

Последний раз редактировалось рони, 09.05.2021 в 10:30.
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2021, 11:20
Новичок на форуме
Отправить личное сообщение для grigori Посмотреть профиль Найти все сообщения от grigori
 
Регистрация: 13.07.2013
Сообщений: 5

Это работает лучше, спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическое копирование значений из нескольких input-ов в другой input zulyamodx Элементы интерфейса 2 12.02.2017 20:36
поиск ссылки по тексту, который расположен между тагом <a> gpg10 jQuery 7 09.11.2014 20:58
Записать в один input значения нескольких input -=fluffy=- Элементы интерфейса 2 17.04.2014 16:40
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Обработка нескольких file input Temlekur Работа 8 21.01.2010 17:30