Метод поиска через input

30.12.2022, 00:56. Показов 386. Ответов 0

Метки javascript (Все метки)

Студворк — интернет-сервис помощи студентам

Как получить данные через input и при нахождение все остальные не найденные данные спрятались?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pen</title>
</head>
 <div class="hidden__search">
      <label>
            <input type="search" class="hidden__search-field" id="elastic" placeholder="Поиск">
      </label>
 </div>
 <div class="hidden__list">
     <div class="hidden__items">
        <div class="hidden__item-row">
             <img src="BTC.svg" class="hidden__item-img">
             <div class="hidden__item-wrapper">
                <span class="hidden__item-name">(BTC)</span>
             </div>
        </div>
        <div class="hidden__item-row">
             <img src="USDTBEP20.svg" class="hidden__item-img">
             <div class="hidden__item-wrapper">
                  <span class="hidden__item-name">(USDT)</span>
              </div>
        </div>
  </div>
<script type="text/javascript">
   const elastic = document.querySelector('#elastic')
 
   elastic.addEventListener('input', (ev) => {
   const value = ev.target.value.trim()
   const elasticItems = document.querySelectorAll('.hidden__item')
   const searchRegExp = new RegExp(value, 'gi')
 
   if (value === '') {
   elasticItems.forEach((el) => {
        el.classList.remove('hide')
   })
         return
   }
 
   elasticItems.forEach((el) => {
        const innerCard = el.querySelector('.hidden__item-row')
        const elementText = innerCard.textContent
        const isContainsSearchRequest = searchRegExp.test(elementText)
        
        if (!isContainsSearchRequest) {
           el.classList.add('hide')
        } else {
           el.classList.remove('hide')
        }
        })
   })
</script>
</body>
</html>

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

30.12.2022, 00:56

Ответы с готовыми решениями:

Как записать код поиска минимума, максимума через метод?
Подскажите пожалуйста, как данный код записать через метод Console.WriteLine("введите 3 числа"); int a =new int ; int max...

Удаление с запроса поиска точек, пробелов, символов (метод поиска по сайту)
Добрый день, знатоки, подскажите: Если клиент вбивает в поиск номер продукта (например: 167.4А78-38 47) как сделать что бы с этого...

Разработать программу для поиска нужной фамилии в массиве, используя метод бинарного поиска
Разработать программу для поиска нужной фамилии в массиве, используя метод бинарного поиска. Добавлено через 2 минуты С...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

30.12.2022, 00:56

Помогаю со студенческими работами здесь

Метод перебора (равномерного поиска, метод покрытия)
Добрый вечер! Помогите написать программу,реализующую метод равномерного поиска поиска min значения на отрезке . x1=a+h/2; f(xi) x=xi+h;

Создание строки поиска (input)
Вот существует тег <input>, определяющий поле ввода текста, в данном случае для поиска, а как создать конопочку, нажимая которую...

Невозможность поиска в ленточной форме значений через стандартное окно поиска
Друзья, доброе время суток! Столкнулся с пренеприятнейшей проблемой: не работает поиск через стандартное окно (Ctrl+F) в ленточной форме...

вид поиска, метод поиска
Написать программу, реализующую один из алгоритмов программного поиска данных в информационном массиве, расположенном в оперативной памяти...

Передача значения id input`a, метод GET
Здравствуйте! Подскажите пожалуйста, почему не передаётся значения id input? Пишет вот такую ошибку: "Notice: Undefined...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Наверх