lightanddesign.ru
You might also like
Несколько дней назад я получил пробное задание от компании на должность front-end разработчика. Конечно, задача включала в себя множество элементов. Однако здесь я опишу только одну из них, а именно структуру постраничного поиска. Это означает простой поиск по введенному в поле тексту (эквивалентно Ctrl + F в браузере). Особенностью этой работы является то, что не пришлось использовать никаких JS-фреймворков или библиотек. Весь код был написан на родном JavaScript.
(Для наглядности скриншоты и код прилагаются по всей статье. Это позволяет нам с вами более четко понимать, о чем мы говорим в данный конкретный момент).
Поиск готового решения
Моя первая мысль: это уже было написано кем-то другим, поэтому мне нужно скопировать это в Google. Вот как я это сделал. В течение часа я нашел два очень хороших скрипта, которые в принципе работают одинаково, но с разными описаниями. Я выбрал тот, пароль которого был мне наиболее понятен, и добавил его в свой аккаунт.
Если вы заинтересованы, вы можете получить код здесь.
Скрипты работают немедленно. Я думал, что решил проблему, но оказалось, что это серьезный недостаток, неприятный для сценариста. Сценарий перебрал все содержимое тега и, как вы, наверное, догадываетесь, вся HTML-страница разрушилась при поиске комбинации символов, похожих на тег или его атрибуты.
Почему скрипт работал некорректно?
Все очень просто. Сценарий работает следующим образом. Сначала он записывает все содержимое тела тега в переменную, затем ищет совпадения с регулярными выражениями (введенными пользователем в текстовое поле) и заменяет все совпадения следующим кодом
Затем текущий тег body заменяется на новый. Разметка обновляется, стиль изменяется, а найденные результаты выделяются на экране желтым цветом.
Возможно, вы уже заметили это, но позвольте мне рассказать подробнее. Предположим, вы вводите слово ‘div’ в поле поиска. Как вы можете себе представить, в теле есть много других тегов, включая div. Применение вышеуказанного стиля к ‘div’ нарушит структуру, сделав ее запутанной, а не блочной. В результате после переписывания разметки веб-страница становится полностью нерабочей. Это выглядит следующим образом.
До поиска: показать всю страницу После поиска: показать всю страницу
Как вы можете видеть, страница полностью сломана. Излишне говорить, что сценарий не сработал. Поэтому мы решили создать собственный сценарий с нуля.
Вот как это выглядит
Здесь нас интересует форма поиска. Я обвел его красной линией.
Давайте разберемся в этом немного лучше. Я реализовал это следующим образом (пока чистый HTML) Форма с тремя метками.
Первая — для ввода текста; вторая — для отмены (отмены выбора) поиска; третья — для поиска (отметки найденных результатов).
Другими словами, есть поле ввода и две кнопки. Напишите JavaScript в файле js.js. Предположим, что вы уже создали и связали его.
Первое, что нужно сделать: написать вызовы функций при нажатии кнопок поиска и отмены. Это должно выглядеть примерно так
Вот что вам нужно сделать и почему.
Для поля с текстом укажите id = "text-to-find" (этот id используется для доступа к элементу из js).
Для кнопки отмены укажите следующие атрибуты: type = "button" onclick = "javascript: FindOnPage (‘text-to-find’, false); return false?".
-тип: button — при нажатии, функция FindOnPage (‘text-to-find’, false); передает ID поля с текстом. false
Укажите этот атрибут для кнопки поиска: type = "button" onclick = "javascript: FindOnPage (‘text-to-find’, true); return false;".
— Enter: отправить (можно использовать Enter, когда вы вводите в поле, а не в кнопку, но можно использовать и кнопку) — При нажатии вызывается ли функция FindOnPage? Передать идентификатор поля в тексте, true
Вы могли заметить еще одну функцию: true/false; используйте ее, чтобы определить, какая кнопка нажата (Отменить поиск или Начать поиск). Если вы нажмете "Отмена", вы перейдете к пункту "Ложь". Если вы переходите к поиску, вы переходите к true.
Теперь мы продолжаем. Переходим к JavaScript.
Предположим, что вы уже создали JS-файл и подключили его к DOM.
Прежде чем мы начнем писать код, давайте сначала создадим проход и обсудим, как все работает. Таким образом, по сути, разработайте план действий. Поэтому, когда вы вводите текст в поле, вам приходится искать его на странице, но вы не можете касаться меток или функций. Другими словами, только текстовые объекты. Я уверен, что существует множество способов добиться этого — и я уверен, что наиболее распространенным является использование "текстового объекта". Однако теперь мы используем обычные выражения.
Таким образом, мы находим нужную часть кода. Для этого мы анализируем и ищем совпадения с текстом, вставленным пользователем. Далее мы добавляем стиль к найденному объекту и заменяем HTML-код новым кодом.
Давайте перейдем к следующему шагу. Сначала определите необходимые переменные.
Затем, независимо от того, ищете вы что-то или нет, сразу же установите цену locale_html. Это необходимо для того, чтобы вы могли сразу же сохранить домашнюю страницу и сбросить стиль.
Теперь вам нужно создать функцию под названием DOM. Скоро внутри будет две функции, каждая из которых будет вызываться в соответствии с кнопками, которые мы нажимаем. В конце концов, неважно, ищем мы его или убираем. А это, как вы помните, контролируется свойством True/False. Вы также должны понимать, что при повторном поиске необходимо сбросить предыдущий стиль. Таким образом, существует
Теперь часть логики реализована. Давайте двигаться дальше. Необходимо проверить полученное слово на количество символов. В конце концов, это происходит потому, что нам нужно найти одну букву/символ. Поэтому мы решили ограничить эту функцию символами 3+.
Поэтому сначала он принимает значение, введенное пользователем, и, в зависимости от его длины, выполняет либо основную функцию поиска, либо функцию предупреждения и нигилизма. Это выглядит следующим образом:.
Этот раздел кода объясняется ниже. Единственное, что неясно, — эта строка:.
функция findOnPageBack()
Простота заключается в следующем: метод InnerHTML возвращает HTML-код объекта. В данном случае мы просто заменили текущее тело на исходное тело, которое мы сохранили при загрузке всей страницы.
Давайте перейдем к следующему шагу. Придайте значения основным переменным.
Таким образом, на данном этапе у вас уже есть основные переменные и цены. Далее необходимо указать соответствующую часть кода стиля с выбранным фоном. Это означает проверку выделенного текста по отношению к обычной формуле (фактически, анализ выделенного текста снова, снова с помощью обычной формулы). Для этого необходимо создать нормальное выражение из введенного (созданного) текста, а затем запустить путь как такт. На этом этапе может помочь метод оценки.
Как правило, после замены текста и получения результата в стиле, текущий HTML необходимо заменить на полученный HTML. Делайте.
В принципе, все готово, и скрипт работает. Но давайте добавим несколько деталей об эстетике.
1) Вырезать пробелы в тексте, вставленном пользователем. Введите этот код:.
После этой строки:.
2) Проверьте совпадение (упомяните, если совпадение не найдено). Этот код вставляется в функцию FindOnPagego () после переменной.
Смотрите исходный код здесь. Загрузите исходный код здесь.
На этом пока все. Конечно, первые найденные результаты могут быть прокручены, чтобы соответствовать живому AJAX-поиску, который обычно можно улучшать бесконечно. На данный момент это довольно примитивный поиск в пространстве. Цель статьи — помочь новичкам, если возникнут вопросы, подобные моим. В конце концов, я не нашел простого готового решения.
PS: Для правильной работы необходимо удалить дефисы из текста в HTML-документе в том месте, где между метками находится обычный текст.
Это не главное. Вы можете автоматически удалить эти переводы в сервис, но если вы поняли это раньше меня, то можете подсказать мне, как это исправить.
Также было бы интересно понять, написал ли кто-то нечто подобное, но не поделился источником в живом поиске.
Приятно услышать конструктивную критику, мнения и, возможно, рекомендации.
На днях был закончен небольшой код, и он выполнил живой поиск на странице. В результате проблема была устранена. HTML-код не был изменен. Смотрите здесь.
Поиск осуществляется с помощью класса ‘place_for_live_search’. Поэтому, если вы хотите, чтобы алгоритм анализировал требуемый контент, добавьте класс, и все готово.
