Как сделать динамическую подсказку в поисковой форме WordPress

В этой статье разберём, как добавить динамическую подсказку (autocomplete) в поисковую форму WordPress. Такая подсказка улучшает удобство пользователей, позволяя им видеть варианты поиска по мере ввода текста. Мы рассмотрим практические примеры с использованием AJAX и REST API WordPress, а также приведём примеры плагинов и собственного кода.

Зачем нужна динамическая подсказка в поиске WordPress

Стандартный поиск WordPress достаточно прост и не показывает подсказки. Пользователю приходится вводить весь запрос и нажимать кнопку, что замедляет поиск и снижает конверсию. Динамическая подсказка помогает:

• ускорить поиск — показывая релевантные варианты сразу;
• уменьшить количество опечаток и неверных запросов;
• повысить вовлечённость и удобство пользователей.

Реализовать такую подсказку можно разными способами: с помощью плагинов или собственного кода на AJAX и REST API. Рассмотрим оба варианта.

Использование плагинов для автодополнения поиска в WordPress

1. Ivory Search

Ivory Search — популярный плагин, который добавляет расширенный поиск с автодополнением. Его преимущество — простота настройки и совместимость с любыми темами, включая Hueman.

• Устанавливаете и активируете плагин.
• В настройках включаете опцию автодополнения.
• Выбираете, по каким типам записей и полям показывать подсказки.

Подробнее на официальной странице Ivory Search на WPSHOP.

2. SearchWP Live Ajax Search

Этот плагин позволяет добавить живую подсказку с использованием AJAX и более точный поиск по контенту.

• Поддерживает кастомные поля и таксономии.
• Можно настроить внешний вид и поведение.

Плагин платный, но есть демо и подробная документация.

Создание собственной динамической подсказки через AJAX и REST API WordPress

Если нужен индивидуальный подход и оптимизация под свой проект, можно написать свой код. Ниже пример, как сделать динамическую подсказку с использованием REST API WP и AJAX.

1. Создаём REST API endpoint для поиска подсказок

add_action('rest_api_init', function() {
    register_rest_route('hueman/v1', '/search-suggestions/', array(
        'methods' => 'GET',
        'callback' => 'hueman_get_search_suggestions',
        'permission_callback' => '__return_true',
    ));
});

function hueman_get_search_suggestions(WP_REST_Request $request) {
    $search = sanitize_text_field($request->get_param('q'));
    if (strlen($search) < 2) {
        return [];
    }
    $args = [
        's' => $search,
        'posts_per_page' => 5,
        'post_status' => 'publish',
        'fields' => 'ids',
    ];
    $query = new WP_Query($args);
    $results = [];
    foreach ($query->posts as $post_id) {
        $results[] = get_the_title($post_id);
    }
    return $results;
}

Этот код создаёт эндпоинт /wp-json/hueman/v1/search-suggestions/?q=запрос, который вернёт до 5 названий постов, соответствующих запросу.

2. Добавляем AJAX-запрос в поисковую форму

Далее добавляем JS-код, который будет отправлять запросы и показывать подсказки:

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('form.search-form input[type="search"]');
    if (!input) return;

    const suggestionBox = document.createElement('ul');
    suggestionBox.style.position = 'absolute';
    suggestionBox.style.background = '#fff';
    suggestionBox.style.border = '1px solid #ccc';
    suggestionBox.style.listStyle = 'none';
    suggestionBox.style.padding = '0';
    suggestionBox.style.margin = '0';
    suggestionBox.style.width = input.offsetWidth + 'px';
    suggestionBox.style.zIndex = '9999';
    input.parentNode.style.position = 'relative';
    input.parentNode.appendChild(suggestionBox);

    input.addEventListener('input', function() {
        const query = input.value.trim();
        if (query.length < 2) {
            suggestionBox.innerHTML = '';
            return;
        }

        fetch(`/wp-json/hueman/v1/search-suggestions/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                suggestionBox.innerHTML = '';
                if (data.length === 0) {
                    const li = document.createElement('li');
                    li.textContent = 'Ничего не найдено';
                    li.style.padding = '5px 10px';
                    suggestionBox.appendChild(li);
                    return;
                }
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = item;
                    li.style.padding = '5px 10px';
                    li.style.cursor = 'pointer';
                    li.addEventListener('click', () => {
                        input.value = item;
                        suggestionBox.innerHTML = '';
                        input.form.submit();
                    });
                    suggestionBox.appendChild(li);
                });
            });
    });

    document.addEventListener('click', function(e) {
        if (!suggestionBox.contains(e.target) && e.target !== input) {
            suggestionBox.innerHTML = '';
        }
    });
});

Оптимизация и расширение динамической подсказки

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

• Дебаунсинг запросов, чтобы не отправлять слишком много AJAX-запросов;
• Показывать дополнительные данные в подсказках, например, миниатюры или категории;
• Кешировать результаты на стороне клиента или сервера;
• Поддержку поиска по кастомным полям и таксономиям.

Также можно интегрировать подсказку с плагинами SEO и фильтрами, например, Clearfy Pro для оптимизации запросов и скорости.

Заключение

Динамическая подсказка в поисковой форме WordPress — это мощный инструмент для улучшения юзабилити сайта. Вы можете использовать готовые плагины для быстрого результата или написать собственное решение с помощью REST API и AJAX, которое будет идеально подстраиваться под ваши задачи и тему Hueman.

Если вы хотите быстро и качественно внедрить расширенный поиск, рекомендую рассмотреть Ivory Search или Clearfy Pro для комплексной оптимизации.