Простой пример поиска на php. Организация поиска по веб-странице на JavaScript (без jQuery)

Nokia 03.05.2019
Nokia
  • Разработка веб-сайтов

    • Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них - организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript .

    Поиск готового решения Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.

    Если кому интересно, код брал .

    Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега... и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.

    Почему скрипт работал некорректно? Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body , затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:

    ...найденное совпадение...
    А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.

    Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div» . Как вы понимаете, внутри body есть множество других тегов, в том числе и div . И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.

    Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.

    Итак пишем скрипт с нуля Как все у меня выглядит.

    Сейчас нас интересует форма с поиском. Обвел ее красной линией.

    Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.

    Первый - для ввода текста;
    Второй - для для отмены поиска (снять выделение);
    Третий - для поиска (выделить найденные результаты).


    Итак, у нас есть поле для ввода и 2 кнопки. 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;»

    - Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
    - При нажатии вызывается функция FindOnPage("text-to-find",true); и передает id поля с текстом, true

    Вы наверняка заметили еще 1 атрибут: true/false . Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false . Если жмем на поиск, то передаем true .

    Окей, двигаемся дальше. Переходим к JavaScriptБудем считать, что вы уже создали и подключили js файл к DOM.

    Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь - уверен есть много способов. Но сейчас будем использовать регулярные выражения.

    Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст...

    < input type = "search" name = "search_q" / > < / br >

    < / br >

    < input type = "submit" value = "Поиск" / > < / br >

    < / form >

    Так эта форма выглядит в браузере:

    Переходим к скрипту

    Теперь переходим непосредственно к программному коду. Для начала приведу структуру таблицы, которую нужно создать в . Мы будем искать опубликованные материалы по их заголовку. По этому же принципу можно создать PHP скрипт поиска слов по сайту. Все в ваших умелых руках .

    Сначала мы перехватываем значение, введенное пользователем в форму. Затем очищаем его от «мусора»: лишних пробелов, тегов и коннектимся к базе. После этого запускаем SQL запрос, в котором сравниваем значение поискового запроса с названием материалов, сохраненных таблице. При совпадении выводим соответствующий контент. В конце закрываем соединение с MySQL и «сбрасываем» запрос. Вот весь код примера:

    Сначала мы открываем блок PHP-кода тегом ””.

    Любой PHP-код внутри этой пары тегов будет исполняться сервером. Затем мы проверяем, была ли подтверждена форма:

    Мы воспользуемся встроенной функцией isset , которая возвращает значение типа bool , и поместим в нее массив $_POST . Логическое выражение в программировании позволяет получить нам либо true , либо false .

    Следовательно, если функция возвращает значение true , то форма была подтверждена, и нам нужно продолжить выполнение кода дальше. Если же функция возвращает значение false , то мы выведем сообщение об ошибке. Сохраните весь набранный код в файле search_submit.php .

    Мы вкладываем еще одно условное логическое выражение внутрь основного, но только в этот раз мы используем массив $_GET вместе со значением “go ”. Сохраните изменения в файле search_go.php .

    Теперь нам нужно убедиться, что посетители могут вводить первую букву в строку запроса только в верхнем или только в нижнем регистре. Нам также нужно предусмотреть способ учета критериев поиска, введенных посетителем. Лучше всего проверять введенные посетителем данные с помощью регулярного выражения:

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

    В нашем случае, это будет поле «Имя » (name ). Чтобы извлечь параметры поиска, указанные посетителем, мы создаем переменную $name, и привязываем к ней значение POST с названием поля из формы, которое будет использоваться в SQL-запросе . Сейчас мы реализовали: (1) отправку данных формы, (2) строка запроса включает значение go и (3) посетитель ввел либо заглавную, либо строчную первую букву. И все эти проверки происходят еще до внесения изменений в базу данных. Сохраните все изменения.

    Результаты Connect, Select, Query и Return из таблицы базы данных

    Чтобы получить данные из таблицы, сначала в скрипте поиска по сайту нужно подключиться к серверу. Для этого мы используем следующий код:

    Мы создаем переменную $db , и привязываем ее к встроенной функции MySQL mysql_connect , которая принимает три параметра: сервер с базой данных (localhost , если вы работаете локально ), логин и пароль.

    После этого мы запускаем встроенную PHP-функцию die , которая останавливает дальнейшее выполнение кода, если нет соединения с базой данных. И выводим информацию об ошибке, запуская встроенную функцию MySQL mysql_error , которая вернет причину ошибки. Сохраните файл search_connectdb.php .

    Создаем переменную под названием mydb и привязываем ее ко встроенной MySQL-функции mysql_select_db , а затем указываем название базы данных, которую создали ранее. Далее мы опрашиваем таблицу базы данных при помощи SQL-запроса с переменной name, в которой содержатся параметры поиска, введенные посетителем:

    При опросе таблицы базы данных мы создаем переменную $sql , и привязываем ее к строке, содержащей SQL-запрос . Мы используем оператор SELECT для извлечения значений из столбцов id , а также имени и фамилии из таблицы contacts . Затем мы используем инструкцию WHERE вместе со значениями имени и фамилии, чтобы сузить поиск.

    Вместе с оператором LIKE мы используем знак процента (%) – спецсимвол, который возвращает 0 и более знаков, а также переменную name из строки поиска. В результате LIKE (в сочетании со спецсимволом ) находит любое соответствующее имя в таблице базы данных. Можно описать весь процесс следующим образом: «Мы выбираем имя и фамилию из таблицы contacts , которые соответствуют введенным посетителем ». Сохраните файл search_query.php .

    Мы создаем переменную $result , и присваиваем ей значение функции mysql_query () , внося ее в $query. Теперь наш запрос хранится в переменной result . Чтобы вывести результат в PHP , мы создаем цикл, а затем выводим данные в неупорядоченном списке:

    Сначала мы создаем цикл while , внутри него создаем переменную под названием row , и инициализируем ее возвращаемым значением функции mysql_fetch_array , которая принимает переменную result , в которой находится наш SQL-запрос . Внутри цикла while мы присваиваем каждому значению столбца значение переменной с идентичным названием. Затем мы выводим значения внутрь неупорядоченного списка.

    Здесь важно обратить внимание на два момента: (1) внутри цикла while не нужно присваивать значения переменным массива row , так как значения можно брать напрямую из массива row ; (2) тег anchor , который мы используем в названии нашего файла вместе с id и основным ключом. Причина этого заключается в том, что во многих поисковых элементах изначально ничего не отображается.

    Так как мы показываем только имя и фамилию, приписывая ID в конце нашего тега anchor , то мы можем использовать ID для дополнительного запроса, который позволит вывести дополнительную информацию о персонале. Сохраните файл и протестируйте форму PHP поиска по сайту (search_display.php ).

    Убираем табуляцию

    Результаты выводятся в виде неупорядоченного списка, но суть в том, что нам не нужна табуляция. Чтобы избавиться от нее, добавьте следующее CSS-правило в самое начало вашего файла в head :

    ul li{ list-style-type:none; }

    Поиск по буквам

    Для реализации поиска по буквам потребуется лишь несколько дополнительных строк кода. Добавим этот удобный функционал для посетителей. Таким образом, они смогут находить представителей персонала по буквам, которые содержатся в имени или фамилии.

    Добавьте следующую строку кода после закрывающего тега form :

    A | B | K



    Рекомендуем почитать