Как сделать живой поиск на сайте, с помощью JavaScript, AJAX и PHP

Оглавление:
На сегодняшний день каждый сайт имеет встроенную функцию поиска. И в этой статье, я хочу Вам показать один вариант реализации живого поиска.
Живой поиск, означает что по мере того, как пользователь будет вводить данные в поле поиска, автоматически, предлагаемые варианты поиска будут обновляться.
Эти рекомендации появляются в режиме реального времени из подключенной базы. Таким образом, как только пользователь начинает вводить запрос, варианты поиска обновляются в зависимости от введенных данных.
Пример живого поиска на сайте google:
Необходимые инструменты и знания:
- Редактор кода (Sublime, Notepad) или IDE, например, PHPStorm.
- Локальный сервер или хостинг. В данной статье я буду использовать локальный сервер Open Server.
- Знания HTML, CSS, PHP, MySQL, JavaScript, AJAX.
Добавление домена в OpenServer
И так, для начала, нам необходимо создать папку для нашего сайта.
Для этого открываем папку 'domains', которая расположена внутри папки сервера OpenServer. И создаем там папку с названием 'live-search.local'.
После этого, открываем настройки Open Server.
Переходим во вкладку 'Домены', указываем папку домена и добавляем домен.
Создание и настройка базы данных
Для того чтобы перейти к создании базы данных, запускаем сервер и открываем СУБД PHPMyAdmin.
Нажимаем на ссылку 'New'.
Указываем название базы 'live_search' и выбираем кодировку 'utf8mb4_unicode_ci'.
Далее, создаем таблицу 'users', со столбцами 'id' и 'name' и наполняем ее данными.
Для этого, в PhpMyAdmin, переходим на вкладке SQL и запускам следующий запрос:
CREATE TABLE users ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, Name VARCHAR(30) NOT NULL ); INSERT INTO `users` VALUES (1, 'Василий'), (2, 'Татьяна'), (3, 'Наталия'), (4, 'Иван'), (5, 'Андрей');
И видим, что данные добавились.
Создание необходимых файлов
Создайте следующие файлы в папке 'live-search.local'.
index.php - основной файл поисковой системы, в котором пользователь вводит данные и просматривает результат.
db.php - содержит данные для подключения к базе данных.
handler.php - файл, который обрабатывает ajax запрос и выдает результаты.
script.js - Этот файл содержит функцию-обработчик события 'keyup' и отправляет данные на сервер, используя технологию ajax. Также в нем находится функция fill() которая срабатывает при клике на результат поиска.
style.css – Файл для стилей
Создание живого поиска
Теперь переходим непосредственно к созданию функционала живого поиска.
Открываем файл с именем 'index.php' и вставляем в него следующий код:
<!DOCTYPE html> <html lang="ru"> <head> <title>Живой поиск</title> <!-- Подключаем библиотеку jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Подключаем наш файл скрптов --> <script type="text/javascript" src="script.js"></script> <!-- Подключаем наш файл стилей--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <!-- Поле поиска --> <label> <input type="text" id="search" placeholder="Поиск людей" /> </label> </form> <p> <b>Например: </b> <i>Василий, Татьяна, Наталия, Иван, Андрей</i> </p> <!-- Контейнер для результатов поиска --> <div id="display"></div> </body> </html>
Теперь, настроим подключение к базе данных. Для открываем файл 'db.php' и вставляем в него следующий код:
<?php // Подключение к базе данных $connectionDB = mysqli_connect( "localhost", // Название хоста "username", // username "password", // Пароль пользователя "live_search" // Название базы данных ); // Проверка подключения if (mysqli_connect_errno()) { echo "Невозможно подключится к MySQL: " . mysqli_connect_error(); } ?>
Далее, открываем файл 'handler.php' и вставляем в него следующий код:
<?php // Подключаем файл конфигурации include "db.php"; // Получаем значение переменной "search" из файла "script.js". if (isset($_POST['search'])) { // Помещаем поисковой запрос в переменной $Name = $_POST['search']; // Запрос для выбора из базы данных $Query = "SELECT Name FROM users WHERE Name LIKE '%$Name%' LIMIT 5"; //Производим поиск в базе данных $ExecQuery = mysqli_query($connectionDB, $Query); // Создаем список для отображения результатов echo '<ul>'; //Перебираем результаты из базы данных while ($Result = mysqli_fetch_array($ExecQuery)) { ?> <li onclick='fill("<?php echo $Result['Name']; ?>")'> <a> <?php echo $Result['Name']; ?> </a> </li> <?php } } ?> </ul>
Открываем файл с именем 'script.js' и вставляем в него следующий код:
$(document).ready(function() { // Обработчик события keyup, сработает после того как пользователь отпустит кнопку, после ввода чего-либо в поле поиска. // Поле поиска из файла 'index.php' имеет id='search' $("#search").keyup(function() { // Присваиваем значение из поля поиска, переменной 'name'. var name = $('#search').val(); // Проверяем если значение переменной 'name' является пустым if (name === "") { // Если переменная 'name' имеет пустое значение, то очищаем блок div с id = 'display' $("#display").html(""); } else { // Иначе, если переменная 'name' не пустая, то вызываем ajax функцию. $.ajax({ type: "POST", // Указываем что будем обращатся к серверу через метод 'POST' url: "handler.php", // Указываем путь к обработчику. То есть указывем куда будем отправлять данные на сервере. data: { // В этом объекте, добавляем данные, которые хотим отправить на сервер search: name // Присваиваем значение переменной 'name', свойству 'search'. }, success: function(response) { // Если ajax запрос выполнен успешно, то, добавляем результат внутри div, у которого id = 'display'. $("#display").html(response).show(); } }); } }); }); function fill(Value) { // Функция 'fill', является обработчиком события 'click'. // Она вызывается, когда пользователь кликает по элементу из результата поиска. $('#search').val(Value); // Берем значение элемента из результата поиска и добавляем его в значение поля поиска $('#display').hide(); // Скрываем результаты поиска }
Открываем файл стилей 'style.css', и вставляем в него следующий код:
a:hover { background-color: yellow; }
Готово! Функционал ‘живой поиск’ готов к тестированию.
Открываем сайт в браузере, по адресу live-search.local/
Теперь в текстовое поле, вводим какое-то имя из примера. Или можно ввести только некоторую комбинацию букв из имени. Например, поищем 'Андрея'. Вводим в поиск 'ан'.
Как видим, в результатах поиска, по запросу 'ан' у нас отображаются, имена, которые содержат эту комбинацию букв.
Теперь разберемся как работает наш живой поиск. Значит при вводе запроса, значение поля поиска, считывается скриптом из файла 'script.js'.
В данном файле, используя технологию 'ajax', это значение передается на сервере. Обработчиком на стороне сервера является файл 'handler.php'.
В файле 'handler.php', по введенному запросу, производится поиск в таблице 'users' из базы данных.
Здесь же, формируется список с результатами поискового запроса и возвращается обратно в файле 'script.js', в функцию 'success'.
success: function(response) { // Если ajax запрос выполнен успешно, то, добавляем результат внутри div, у которого id = 'display'. $("#display").html(response).show(); }
Результат с сервера, находится внутри параметра 'response'.
Используя метод html(), мы добавляем этот результат в блоке div с id=display, потом, используя метод show(), мы отображаем этот div, на странице.
И еще, если мы теперь кликнем на результат поиска, то, срабатывает функция fill() из файла 'script.js', которая берет результат по которому кликнули и добавляет его в поле поиска. В тоже время, она скрывает результаты поиска.
Вот и все. Поле для поиска в режиме реального времени готова.
Видео: 15 Способов Поиска в Google, о Которых не Знают 96 % Людей
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2020-03-19 04:49:14