Реализация поиска только внутри модального окна?
Всем привет, есть модальное окно, в нем у меня отформатированный JSON для чтения (react-jsow-view)
Я хочу выполнить поиск конкретно только в модальном окне (CTRL + F).
Сейчас поиск происходит по всему DOM и выделяются элементы вне модального окна.
Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.
Дополнительно:
Ответы:
Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.
Нативного - не встречал, только перехват и прослушка комбинации ctrl + f.
- Пока даже плохо представляю реализацию, ctrl + f как-то ищет несмотря на разметку, я так понимаю что-то парсит и склеивает у себя там под капотом.
При учете своей разметки нужно танцевать с бубном что ли?)
- Andrey Vasilev, с подсветкой возможно поможет CSS Custom Highlight API
- Andrey Vasilev,
Пока даже плохо представляю реализацию
1. Отменяем стандартное действие поиска.
2. Вешаем слушателя на нужные клавиши.
3. Если выполнен п2 и открыто_нужное_модальное_окно > выполняем п4.
4. Скролим окно в нужной части json, если такое найдено. - Михаил Р., это я прекрасно понимаю, но загвоздка в том что мы убираем дефолтный поиск и искать придется своими собственными силами. Хотелось бы узнать о фичах которые помогли и не затягивали процесс разработки изобретением велосипеда. Выше комент от Ивана неплохой, уже не придется дергаться с поиском по сути и можно просто встроить инпут и при вводе символов будет подсветка. Остался только скролл по сути к нужному месту. При условии что я правильно понял работу CSS Custom Highlight API
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации поиска только внутри модального окна можно использовать следующий подход:
1. Сначала создайте модальное окно на вашей странице, например, с помощью HTML и CSS. Убедитесь, что у модального окна есть уникальный идентификатор, который вы будете использовать для обращения к нему.
2. Далее напишите скрипт на JavaScript, который будет открывать модальное окно при нажатии на определенную кнопку или ссылку. В этом скрипте также можно добавить функционал для закрытия модального окна.
3. Теперь необходимо добавить функционал поиска внутри модального окна. Для этого можно использовать JavaScript, который будет осуществлять поиск по контенту модального окна и скрывать элементы, не соответствующие введенному запросу.
Пример кода для реализации поиска внутри модального окна на языке JavaScript:
// Функция для поиска в модальном окне function searchInModal() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById('searchInput'); filter = input.value.toUpperCase(); ul = document.getElementById('modalContent'); li = ul.getElementsByTagName('li'); for (i = 0; i <li> -1) { li[i].style.display = ''; } else { li[i].style.display = 'none'; } } } // Привязка функции к событию ввода текста в поле поиска document.getElementById('searchInput').addEventListener('input', searchInModal);
В данном примере предполагается, что у вас есть модальное окно с id="modalContent" и полем для ввода запроса с id="searchInput". Функция searchInModal будет скрывать элементы списка в модальном окне, которые не содержат текст, соответствующий запросу пользователя.
Надеюсь, данное объяснение поможет вам реализовать поиск только внутри модального окна на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.