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

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

Оглавление:

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

Живой поиск, означает что по мере того, как пользователь будет вводить данные в поле поиска, автоматически, предлагаемые варианты поиска будут обновляться.

Эти рекомендации появляются в режиме реального времени из подключенной базы. Таким образом, как только пользователь начинает вводить запрос, варианты поиска обновляются в зависимости от введенных данных.

Пример живого поиска на сайте google:

Необходимые инструменты и знания:

Редактор кода (Sublime, Notepad) или IDE, например, PHPStorm.
Локальный сервер или хостинг. В данной статье я буду использовать локальный сервер Open Server.
Знания HTML, CSS, PHP, MySQL, JavaScript, AJAX.

Добавление домена в OpenServer

И так, для начала, нам необходимо создать папку для нашего сайта.

Для этого открываем папку 'domains', которая расположена внутри папки сервера OpenServer. И создаем там папку с названием 'live-search.local'.

После этого, открываем настройки Open Server.

Переходим во вкладку 'Домены', указываем папку домена и добавляем домен.

вкладка домены в Open Server — Рис 4. Вкладка домены в Open Server

Создание и настройка базы данных

Для того чтобы перейти к создании базы данных, запускаем сервер и открываем СУБД PHPMyAdmin.

открываем PhpMyAdmin в Open Server — Рис 5. Открываем PhpMyAdmin в Open Server

Как создать Базу Данных MySql в phpmyadmin

Нажимаем на ссылку 'New'.

создание новой базы данных — Рис 6. Создание новой базы данных

Указываем название базы 'live_search' и выбираем кодировку 'utf8mb4_unicode_ci'.

создание новой базы данных в PhpMyAdmin — Рис 7. Создание новой базы данных в PhpMyAdmin

Далее, создаем таблицу '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, 'Андрей');

Рис 8. Запуск SQL кода для создания таблицы users

И видим, что данные добавились.

результат запроса SQL — Рис 9. Результат запроса SQL

Создание необходимых файлов

Создайте следующие файлы в папке '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/

живой поиск ajax — Рис 10. Живой поиск ajax

Теперь в текстовое поле, вводим какое-то имя из примера. Или можно ввести только некоторую комбинацию букв из имени. Например, поищем 'Андрея'. Вводим в поиск 'ан'.

пример живого поиска — Рис 11. Результаты живого поиска

Как видим, в результатах поиска, по запросу 'ан' у нас отображаются, имена, которые содержат эту комбинацию букв.

Теперь разберемся как работает наш живой поиск. Значит при вводе запроса, значение поля поиска, считывается скриптом из файла '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', которая берет результат по которому кликнули и добавляет его в поле поиска. В тоже время, она скрывает результаты поиска.

Вот и все. Поле для поиска в режиме реального времени готова.

Посмотреть код на GitHub

Видео: 15 Способов Поиска в Google, о Которых не Знают 96 % Людей

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Следующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в: