Как создать функцию автоподсказки в поиске WordPress с поддержкой AJAX

Автоподсказки в поиске — это удобный инструмент, который значительно улучшает пользовательский опыт на сайте. В этой статье разберём, как самостоятельно реализовать функцию автоподсказки в поиске WordPress с использованием AJAX, чтобы результаты появлялись динамически по мере ввода запроса. Такой подход позволяет избежать перезагрузки страницы и сделать поиск более интерактивным.

Почему стоит использовать AJAX для автоподсказок в поиске WordPress

Стандартный поиск WordPress требует полной перезагрузки страницы при каждом запросе, что неудобно и замедляет работу сайта. AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы к серверу в фоновом режиме, мгновенно получать результаты и отображать их пользователю без перезагрузки страницы.

Реализация автоподсказок с AJAX помогает повысить юзабилити, ускорить поиск и снизить нагрузку на сервер, так как запросы отправляются только при изменении текста в поле поиска.

Для реализации нам понадобится добавить JavaScript для отслеживания ввода пользователя, PHP-функцию для обработки AJAX-запроса и зарегистрировать AJAX-обработчики в WordPress.

Подготовка: создание AJAX-обработчика в WordPress

Первым шагом создадим PHP-функцию, которая будет принимать GET-параметр с поисковым запросом и возвращать JSON-ответ с подходящими постами.

function wpbe_ajax_search_suggestions() {
    // Проверяем наличие параметра 'term'
    $term = isset($_GET['term']) ? sanitize_text_field(wp_unslash($_GET['term'])) : '';

    if (empty($term)) {
        wp_send_json([]);
        wp_die();
    }

    $args = [
        's' => $term,
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'post_type' => 'post',
    ];

    $query = new WP_Query($args);

    $suggestions = [];

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $suggestions[] = [
                'title' => get_the_title(),
                'permalink' => get_permalink(),
            ];
        }
        wp_reset_postdata();
    }

    wp_send_json($suggestions);
    wp_die();
}
add_action('wp_ajax_wpbe_search_suggestions', 'wpbe_ajax_search_suggestions');
add_action('wp_ajax_nopriv_wpbe_search_suggestions', 'wpbe_ajax_search_suggestions');

Здесь мы создаём функцию wpbe_ajax_search_suggestions, которая ищет опубликованные записи по введённому термину и возвращает до 5 результатов с заголовком и ссылкой.

Добавление JavaScript для отправки AJAX-запросов и отображения автоподсказок

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

Лучше всего подключать этот скрипт через wp_enqueue_script и локализовать данные для AJAX-ссылки:

function wpbe_enqueue_search_scripts() {
    wp_enqueue_script('wpbe-search-autocomplete', get_template_directory_uri() . '/js/wpbe-search-autocomplete.js', ['jquery'], null, true);
    wp_localize_script('wpbe-search-autocomplete', 'wpbeSearch', [
        'ajaxurl' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpbe_enqueue_search_scripts');

Создайте файл wpbe-search-autocomplete.js в папке js вашей темы или плагина со следующим содержимым:

jQuery(document).ready(function($) {
    var $input = $('#searchform input[name="s"]');
    var $results = $('<ul id="wpbe-search-suggestions" style="position:absolute; background:#fff; border:1px solid #ccc; list-style:none; padding:0; margin:0; max-width:300px;"></ul>');
    $input.after($results);

    $input.on('input', function() {
        var term = $(this).val();
        if(term.length < 3) {
            $results.empty().hide();
            return;
        }

        $.ajax({
            url: wpbeSearch.ajaxurl,
            method: 'GET',
            data: {
                action: 'wpbe_search_suggestions',
                term: term
            },
            success: function(data) {
                $results.empty();
                if(data.length) {
                    $.each(data, function(i, item) {
                        var $li = $('<li style="padding:5px 10px; cursor:pointer;"></li>');
                        var $a = $('<a></a>').attr('href', item.permalink).text(item.title);
                        $li.append($a);
                        $results.append($li);
                    });
                    $results.show();
                } else {
                    $results.hide();
                }
            }
        });
    });

    // Скрываем подсказки при клике вне поля
    $(document).on('click', function(e) {
        if(!$(e.target).closest('#wpbe-search-suggestions, #searchform input[name="s"]').length) {
            $results.hide();
        }
    });
});

Особенности и улучшения функции автоподсказки

Реализованная функция базовая, но уже полезна. Дальше можно улучшать её следующим образом:

• Кэширование результатов. Чтобы снизить нагрузку, можно сохранить результаты поиска в transient или использовать объектный кеш.
• Поиск по метаданным. Добавьте поиск по пользовательским полям, например, по цене или автору, если это релевантно.
• Подсветка совпадений. В результатах можно выделять жирным совпадающие части запроса для лучшей читаемости.
• Поддержка пагинации. Если результатов много, показывайте кнопки «Показать ещё».
• Интеграция с плагинами. Например, можно использовать Clearfy Pro для оптимизации AJAX-запросов и очистки базы данных, что ускорит работу поиска.

Пример расширения: добавление подсветки совпадений в JavaScript

Добавим подсветку совпадающих частей заголовков в подсказках:

function wpbe_highlight_term(text, term) {
    var re = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
    return text.replace(re, '<strong>$1</strong>');
}

// В success AJAX заменяем создание ссылки на:
var highlighted = wpbe_highlight_term(item.title, term);
var $a = $('<a></a>').attr('href', item.permalink).html(highlighted);

Так визуально пользователь сразу видит, какие части совпали с запросом.

Вывод

Создание собственной функции автоподсказки с AJAX в WordPress — задача, которая не отнимает много времени и значительно улучшает UX сайта. Вы можете использовать приведённый код как основу и по необходимости расширять функционал под свои задачи.

Если нужен готовый плагин с расширенными возможностями, обратите внимание на решения в каталоге WPSHOP.ru, где есть инструменты для оптимизации поиска и автоматизации.