Поиск на странице с отключением блоков div

@Веб-Десигнер · Регистрация: 08.12.2015

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

Добрый день!
Как реализовать поиск на странице с DIV, внутри есть h2. При поиске divы которые не совпадают с поисков отключались.

HTML5
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
<div class="content">
<div class="box" id="box-yellow">
<img src="img/san_francisco_usa.png" alt="San Francisco, USA">
<h2>SAN FRANCISCO</h2>
<div class="go" id="go-yellow"><a href="country">Поехали!</a></div>
</div>
 
<div class="box" id="box-green">
<img src="img/monaco_france.jpg" alt="San Francisco, USA">
<h2>MONACO</h2>
<div class="go" id="go-green"><a href="#">Поехали!</a></div>
</div>
 
<div class="box" id="box-red">
<img src="img/monaco_france.jpg" alt="San Francisco, USA">
<h2>MOSCOW</h2>
<div class="go" id="go-red"><a href="#">Поехали!</a></div>
</div>
 
<div class="box" id="box-blue">
<img src="img/london.jpg" alt="San Francisco, USA">
<h2>LONDON</h2>
<div class="go" id="go-blue"><a href="#">Поехали!</a></div>
</div>
</div>

нужно чтобы отключались блоки на странице если нет совпадения с h2 в блоке.

@Padonak · 06.05.2016, 20:12

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
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>123</title>
<style>
input{
text-align:center;
}
.notfound{
color:#ccc;
text-decoration:line-through;
}
.found{
color:#000;
text-decoration:none;
}
</style>
<script>
onload=function(){
var hs=document.querySelectorAll('.content .box h2');
 
document.querySelector('[autofocus]').onchange=function(){
var val=this.value.toUpperCase();
 
[].forEach.call(hs,function(X){
X.innerHTML.indexOf(val) < 0 ? (
                    X.parentNode.className='notfound',
                    X.parentNode.querySelector('a').onclick=function(){return false;}
                    )
                    :
                    (
                    X.parentNode.className='found',
                    X.parentNode.querySelector('a').onclick=function(){return true;}
                    );
});
}
}
</script>
</head>
<body>
<div class="content">
<div class="box" id="box-yellow">
<img src="img/san_francisco_usa.png" alt="San Francisco, USA">
<h2>SAN FRANCISCO</h2>
<div class="go" id="go-yellow"><a href="country">Поехали!</a></div>
</div>
 
<div class="box" id="box-green">
<img src="img/monaco_france.jpg" alt="San Francisco, USA">
<h2>MONACO</h2>
<div class="go" id="go-green"><a href="#">Поехали!</a></div>
</div>
 
<div class="box" id="box-red">
<img src="img/monaco_france.jpg" alt="San Francisco, USA">
<h2>MOSCOW</h2>
<div class="go" id="go-red"><a href="#">Поехали!</a></div>
</div>
 
<div class="box" id="box-blue">
<img src="img/london.jpg" alt="San Francisco, USA">
<h2>LONDON</h2>
<div class="go" id="go-blue"><a href="#">Поехали!</a></div>
</div>
</div>
<input type="text" placeholder="Поиск" autofocus />
</body>
</html>

@Веб-Десигнер · 08.05.2016, 00:31 **[ТС]**

не совсем то но уже что-то, спасибо!
Наше идеальный вариант как это должно быть http://www.onthegrid.city/
Кто может помочь так сделать?

@Padonak · 08.05.2016, 13:06

Так вы у них спросите кто им делал - он и вам сделает

@Веб-Десигнер · 08.05.2016, 22:40 **[ТС]**

А реально как то вытащить от туда код?

@Padimanskas · 08.05.2016, 23:13

Сообщение от Веб-Десигнер

Кто может помочь

да бог в помощь (или гугл)

@Веб-Десигнер · 09.05.2016, 12:54 **[ТС]**

Padonak, мне помогло, спасибо! Ток как сделать так чтобы пока пишешь, блоки исчезали сразу если нет совпадения, а не после нажатия Enter???

@Padonak · 12.05.2016, 17:30

Веб-Десигнер, в строке 23 замените

JavaScript
1
.onchange=function(){

на

JavaScript
1
.oninput=function(){

@Веб-Десигнер · 17.05.2016, 14:37 **[ТС]**

Теперь проблемы со стилями. После вписывания букв в поиск стили отключаются и картинка на весь экран, "поехали" вообще спускается вниз под картинку.
начал применять стили к .found и .notfound . Но всё равно есть проблемы. Когда стираешь буквы то стили вновь сбрасываются и снова проблема.
Может можно решить проблемы, чтобы было отключение всего что в блоке, но сохранялись стили к блокам которые остаются?

@Веб-Десигнер · 06.06.2016, 20:14 **[ТС]**

я понял как всё делается, спасибо автору! Всё работает!)

@Веб-Десигнер · 27.08.2016, 13:08 **[ТС]**

Padonak, поиск хорошо работает на английском, а на русском вбиваю первую букву он находит, а когда вторую то всё пропадает.
Как решить эту проблему?
Заранее спасибо!

@Spread · 27.08.2016, 19:11

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<a decorator="editable" class="project-cover" href="#win1" data-context="pages" data-identity="id:p564a59827c88d5ff9025be2cdf943e0ef2ca3e21c9dc2999a9e7a" id="n12">
              <div class="cover-image-wrap">
                <div class="cover-image">
                    <img src="./12.jpg" class="cover-normal">
                </div>
              </div>              <div class="details-wrap">
                <div class="details">
                  <div class="details-inner">
                      <div class="title"><font face="Arial">ОДЕЖДА</font></div>
                  </div>
                </div>
              </div>
            </a>

Есть несколько таких блоков, они все находятся в

HTML5
1
2
3
4
5
6
7
<div class="site-container" id="0">
  <div class="site-content">
    <main>
      <section class="project-covers" data-context="theme.gallery.projects">
      </section>
</div>
</div>

У всех разные названия:

HTML5
1
2
3
4
5
..
<div class="title"><font face="Arial">ВЕЩИ</font></div>
...
<div class="title"><font face="Arial">ОКНО</font></div>
и тд

Как реализовать такой же эффект с зачеркиванием названий?

Заранее спасибо

@Веб-Десигнер · 30.08.2016, 12:21 **[ТС]**

up!

@Веб-Десигнер · 03.09.2016, 00:55 **[ТС]**

спецы хелп!

@evikza · 03.09.2016, 03:48

Веб-Десигнер, в чем нужна помощь?

Code
1
поиск хорошо работает на английском, а на русском вбиваю первую букву он находит, а когда вторую то всё пропадает.

Вы добавили названия городов как обычно, т.е Лондон, Москва. Я прав? Необходимо воспользоваться регулярным выражение, для поиска без регистра.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {
  var hs = document.querySelectorAll('.content .box h2');
 
  document.querySelector('[autofocus]').oninput = function() {
    var search = document.querySelector('[autofocus]').value;
    var val = this.value;
    var regVal = new RegExp(val, 'i'); // регулярка, с учетом регистра
    [].forEach.call(hs, function(X) {
      X.innerHTML.search(regVal) < 0 ? (
          X.parentNode.className = 'notfound',
          X.parentNode.querySelector('a').onclick = function() {
            return false;
          }
        ) :
        (
          X.parentNode.className = 'found',
          X.parentNode.querySelector('a').onclick = function() {
            return true;
          }
        );
    });
  }
}

Теперь в поиск можете вводить как хОТитЕ

@Веб-Десигнер · 03.09.2016, 11:22 **[ТС]**

evikza, супер, просто супер!!!
Всё работает и на русском и на английском!

Дело даже не в регистре. Если тебе нужно найти "Москва", и ты вбиваешь первую букву "М", он убирает лишние блоки и оставляет блок "Москва", но если начать вод еще одной буквы "Мо", то всё пропадает. И это именно в h2 на русском языке, а когда названия городов были на английском всё было хорошо, такой проблемы не было.
Сейчас всё решилось, спасибо!)

РАБОЧИЙ СКРИПТ!

@Веб-Десигнер · 12.09.2016, 17:34 **[ТС]**

evikza, всё хорошо, ток вопрос:
как эта строчка

JavaScript
1
2
X.parentNode.querySelector('a').onclick = function() {
return false;

и эта

JavaScript
1
2
X.parentNode.querySelector('a').onclick = function() {
return true;

}

влияет на поиск?
Мне нужно блоки по разному конструировать, чтобы <a> не влияла, а поиск был только по <h2> ???

@evikza · 12.09.2016, 17:47

Веб-Десигнер, если присутствует класс notfound == запрет на выполнение действий. Именно на поиск никак не влияют. Можете удалить эти условия.

@Веб-Десигнер · 12.09.2016, 17:57 **[ТС]**

допустим, мне нужна такая структура

HTML5
1
2
3
4
5
<div class="box">
<a href="#">
<h2>САН-ФРАНЦИСКО</h2> 
</a>
</div>

в такой структуре не работает, т.к. <h2> находиться в <a>. Из-за этого спрашиваю, как можно организовать поиск без этих строк?)

JavaScript
1
2
X.parentNode.querySelector('a').onclick = function() {
return false;

и

JavaScript
1
2
X.parentNode.querySelector('a').onclick = function() {
return true;

Добавлено через 1 минуту
может есть другое решение)

@evikza · 12.09.2016, 18:20

Веб-Десигнер, дак я же вам говорил. Если нужно, уберите. Все работает:

HTML5
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
58
59
60
61
62
<html>
 
<head>
  <meta charset="utf-8" />
  <title>123</title>
  <style>
    input{
    text-align:center;
    }
    .notfound{
    display: none;
    color:#ccc;
    text-decoration:line-through;
    }
    .found{
    color:#000;
    text-decoration:none;
    }
  </style>
  <script>
window.onload = function() {
  var hs = document.querySelectorAll('.content .box h2');
 
  document.querySelector('[autofocus]').oninput = function() {
    var search = document.querySelector('[autofocus]').value;
    var val = this.value;
    var regVal = new RegExp(val, 'i'); // регулярка, с учетом регистра
    [].forEach.call(hs, function(X) {
      X.innerHTML.search(regVal) < 0 ? (
          X.parentNode.className = 'notfound'
        ) :
        (
          X.parentNode.className = 'found'
        );
    });
  }
}
  </script>
</head>
 
<body>
  <div class="content">
    <div class="box">
      <a href="#">
        <h2>Сан-Франциско</h2>
      </a>
    </div>
    <div class="box">
      <a href="#">
        <h2>Москва</h2>
      </a>
    </div>
        <div class="box">
      <a href="#">
        <h2>Лондон</h2>
      </a>
    </div>
  </div>
  <input type="text" placeholder="Поиск" autofocus />
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	08.05.2016, 00:31 [ТС]
	не совсем то но уже что-то, спасибо! Наше идеальный вариант как это должно быть http://www.onthegrid.city/ Кто может помочь так сделать? 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	08.05.2016, 13:06
	Так вы у них спросите кто им делал - он и вам сделает 1

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	08.05.2016, 22:40 [ТС]
	А реально как то вытащить от туда код? 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	09.05.2016, 12:54 [ТС]
	Padonak, мне помогло, спасибо! Ток как сделать так чтобы пока пишешь, блоки исчезали сразу если нет совпадения, а не после нажатия Enter??? 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	17.05.2016, 14:37 [ТС]
	Теперь проблемы со стилями. После вписывания букв в поиск стили отключаются и картинка на весь экран, "поехали" вообще спускается вниз под картинку. начал применять стили к .found и .notfound . Но всё равно есть проблемы. Когда стираешь буквы то стили вновь сбрасываются и снова проблема. Может можно решить проблемы, чтобы было отключение всего что в блоке, но сохранялись стили к блокам которые остаются? 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	06.06.2016, 20:14 [ТС]
	я понял как всё делается, спасибо автору! Всё работает!) 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	27.08.2016, 13:08 [ТС]
	Padonak, поиск хорошо работает на английском, а на русском вбиваю первую букву он находит, а когда вторую то всё пропадает. Как решить эту проблему? Заранее спасибо! 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	30.08.2016, 12:21 [ТС]
	up! 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	03.09.2016, 00:55 [ТС]
	спецы хелп! 0

@Веб-Десигнер 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 33
	03.09.2016, 11:22 [ТС]
	evikza, супер, просто супер!!! Всё работает и на русском и на английском! Дело даже не в регистре. Если тебе нужно найти "Москва", и ты вбиваешь первую букву "М", он убирает лишние блоки и оставляет блок "Москва", но если начать вод еще одной буквы "Мо", то всё пропадает. И это именно в h2 на русском языке, а когда названия городов были на английском всё было хорошо, такой проблемы не было. Сейчас всё решилось, спасибо!) РАБОЧИЙ СКРИПТ! 0

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	12.09.2016, 17:47
	Веб-Десигнер, если присутствует класс `notfound` == запрет на выполнение действий. Именно на поиск никак не влияют. Можете удалить эти условия. 0

Поиск на странице с отключением блоков div

Решение