Как сделать автоподсказку в поиске WordPress: практическое руководство с примерами

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

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

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

Стандартный поиск WordPress возвращает результаты только после отправки формы. Автоподсказка же выполняет динамический поиск по мере ввода текста, что делает интерфейс интерактивным и современным.

Обзор подходов для реализации автоподсказки

Есть несколько способов добавить автоподсказку:

Использовать готовые плагины, например Ajax Search Lite. Это быстро, но не всегда соответствует дизайну и специфическим требованиям.
Добавить свою реализацию с помощью AJAX-запросов к WordPress REST API или admin-ajax.php, что даёт полный контроль и гибкость.

В нашем примере мы рассмотрим второй вариант — самостоятельную реализацию автоподсказки с нуля.

Создаём AJAX-обработчик для автоподсказки

Начнём с создания обработчика AJAX-запросов в файле functions.php вашей темы или в отдельном плагине. Обработчик будет принимать поисковый запрос, искать подходящие посты и возвращать их в формате JSON.

add_action('wp_ajax_wplock_autocomplete_search', 'wplock_autocomplete_search_callback');
add_action('wp_ajax_nopriv_wplock_autocomplete_search', 'wplock_autocomplete_search_callback');

function wplock_autocomplete_search_callback() {
    if (!isset($_GET['term'])) {
        wp_send_json_error();
        wp_die();
    }
    $term = sanitize_text_field($_GET['term']);

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

    $query = new WP_Query($args);
    $results = [];

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

    wp_send_json_success($results);
    wp_die();
}

Здесь мы создаём два хука для AJAX-запросов, чтобы обеспечить работу как для авторизованных, так и для гостей. В запросе мы ищем посты по введённому термину и возвращаем до 5 результатов.

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

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

function wplock_enqueue_scripts() {
    wp_enqueue_script('wplock-autocomplete', get_template_directory_uri() . '/js/autocomplete.js', ['jquery'], null, true);
    wp_localize_script('wplock-autocomplete', 'wplock_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wplock_enqueue_scripts');

Создайте файл autocomplete.js в папке вашей темы js и добавьте в него следующий код:

jQuery(document).ready(function($) {
    var $searchInput = $('#searchform input[name="s"]');
    var $resultsContainer = $('<ul id="wplock-autocomplete-results" style="border:1px solid #ccc; position:absolute; background:#fff; list-style:none; padding:0; margin-top:0;"></ul>').insertAfter($searchInput);

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

        $.ajax({
            url: wplock_ajax_obj.ajax_url,
            data: {
                action: 'wplock_autocomplete_search',
                term: term
            },
            success: function(response) {
                if (response.success) {
                    $resultsContainer.empty();
                    if (response.data.length) {
                        response.data.forEach(function(item) {
                            var $li = $('<li style="padding:5px 10px; cursor:pointer;"></li>');
                            $li.text(item.title);
                            $li.on('click', function() {
                                window.location.href = item.url;
                            });
                            $resultsContainer.append($li);
                        });
                        $resultsContainer.show();
                    } else {
                        $resultsContainer.hide();
                    }
                }
            }
        });
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#wplock-autocomplete-results, #searchform input[name="s"]').length) {
            $resultsContainer.hide();
        }
    });
});

Этот скрипт добавляет список под поисковым полем, отправляет AJAX-запрос при вводе текста и показывает результаты. При клике на подсказку пользователь попадёт на соответствующую страницу.

Подключение и стилизация

Проверьте, что у вас в шаблоне поиска есть форма с id searchform, а поле ввода имеет имя s, это стандарт WordPress. Если структура другая, скорректируйте селекторы в JS.

Для улучшения внешнего вида можно добавить CSS:

#wplock-autocomplete-results {
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 9999;
}
#wplock-autocomplete-results li:hover {
    background-color: #f0f0f0;
}

Оптимизации и расширения

Для улучшения производительности и пользовательского опыта можно добавить:

Дебаунсинг ввода — чтобы не отправлять запросы слишком часто, например, ждать 300 мс после последнего нажатия.
Поиск по нескольким типам записей (страницы, кастомные типы).
Вывод миниатюр изображений и кратких описаний в подсказках.
Использование REST API вместо admin-ajax.php для более современного подхода.

Если хотите более продвинутый функционал с минимальной настройкой, обратите внимание на плагин Ajax Search Lite от WPShop, который позволяет быстро и красиво реализовать автодополнение с множеством опций.

Заключение по теме автоподсказки в поиске WordPress

Добавление автоподсказки — это отличный способ повысить удобство поиска на вашем сайте. Использование AJAX в связке с WP_Query позволяет гибко настраивать вывод и адаптировать под любые задачи. При правильной реализации вы получите быстрый, отзывчивый и полезный интерфейс поиска без лишних плагинов.