Реализация поиска только внутри модального окна?

Question

[Andrey Vasilev]

Всем привет, есть модальное окно, в нем у меня отформатированный JSON для чтения (react-jsow-view)
Я хочу выполнить поиск конкретно только в модальном окне (CTRL + F).
Сейчас поиск происходит по всему DOM и выделяются элементы вне модального окна.
Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.

Answer 1

[Михаил Р.]

Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.

Нативного - не встречал, только перехват и прослушка комбинации ctrl + f.

Comments

[Andrey Vasilev]

Пока даже плохо представляю реализацию, ctrl + f как-то ищет несмотря на разметку, я так понимаю что-то парсит и склеивает у себя там под капотом.
При учете своей разметки нужно танцевать с бубном что ли?)

[Ivan Ustûžanin]

Andrey Vasilev, с подсветкой возможно поможет CSS Custom Highlight API

[Михаил Р.]

Andrey Vasilev,

Пока даже плохо представляю реализацию

1. Отменяем стандартное действие поиска.
2. Вешаем слушателя на нужные клавиши.
3. Если выполнен п2 и открыто_нужное_модальное_окно > выполняем п4.
4. Скролим окно в нужной части json, если такое найдено.

[Andrey Vasilev]

Михаил Р., это я прекрасно понимаю, но загвоздка в том что мы убираем дефолтный поиск и искать придется своими собственными силами. Хотелось бы узнать о фичах которые помогли и не затягивали процесс разработки изобретением велосипеда. Выше комент от Ивана неплохой, уже не придется дергаться с поиском по сути и можно просто встроить инпут и при вводе символов будет подсветка. Остался только скролл по сути к нужному месту. При условии что я правильно понял работу CSS Custom Highlight API