Как создать автозаполняемое поле в WordPress с примерами кода

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

Что такое автозаполняемое поле и зачем оно нужно в WordPress

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

В WordPress автозаполнение часто используется в:

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

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

Как реализовать автозаполнение в WordPress через AJAX и REST API

Самый современный и надёжный способ — использовать REST API WordPress для получения подсказок и JavaScript с fetch или jQuery AJAX для отправки запросов.

Рассмотрим пошаговую реализацию.

1. Создаем обработчик REST API в functions.php

Добавим в functions.php вашей темы или в плагин следующий код:

add_action('rest_api_init', function () {
    register_rest_route('wpplugins/v1', '/autocomplete', array(
        'methods' => 'GET',
        'callback' => 'wpplugins_autocomplete_callback',
        'permission_callback' => '__return_true',
    ));
});

function wpplugins_autocomplete_callback(WP_REST_Request $request) {
    $search = sanitize_text_field($request->get_param('q'));
    if (empty($search)) {
        return [];
    }

    $args = [
        's' => $search,
        'post_type' => 'post',
        'posts_per_page' => 10,
    ];

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

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

    return $results;
}

Этот код регистрирует новый маршрут REST API /wp-json/wpplugins/v1/autocomplete?q=текст, который возвращает список постов, совпадающих с запросом.

2. Добавляем HTML и JavaScript для поля автозаполнения

В нужном шаблоне или через шорткод добавьте HTML-код поля и блок для подсказок:

<input type="text" id="wpplugins-autocomplete" placeholder="Начните вводить название..." autocomplete="off" />
<div id="wpplugins-autocomplete-results" style="border:1px solid #ccc; max-height:200px; overflow-y:auto; display:none; position:absolute; background:#fff; width:300px; z-index:1000;"></div>

Добавим JS-код для получения и отображения подсказок:

document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('wpplugins-autocomplete');
    const results = document.getElementById('wpplugins-autocomplete-results');

    let debounceTimeout = null;

    input.addEventListener('input', function () {
        clearTimeout(debounceTimeout);
        const query = this.value.trim();

        if (query.length < 2) {
            results.style.display = 'none';
            results.innerHTML = '';
            return;
        }

        debounceTimeout = setTimeout(() => {
            fetch(`/wp-json/wpplugins/v1/autocomplete?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.length === 0) {
                        results.style.display = 'none';
                        results.innerHTML = '';
                        return;
                    }

                    results.innerHTML = '';
                    data.forEach(item => {
                        const div = document.createElement('div');
                        div.textContent = item.title;
                        div.style.padding = '5px';
                        div.style.cursor = 'pointer';
                        div.addEventListener('click', () => {
                            window.location.href = item.link;
                        });
                        results.appendChild(div);
                    });
                    results.style.display = 'block';
                })
                .catch(() => {
                    results.style.display = 'none';
                    results.innerHTML = '';
                });
        }, 300); // задержка 300 мс
    });

    document.addEventListener('click', function(e) {
        if (!results.contains(e.target) && e.target !== input) {
            results.style.display = 'none';
        }
    });
});

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

Если вы хотите реализовать автозаполнение без программирования, можно использовать готовые плагины:

• SearchWP Live Ajax Search — расширяет стандартный поиск WordPress с автозаполнением и подсказками;
• Ajax Search Lite — бесплатный и популярный плагин с гибкими настройками подсказок и фильтрами;
• WP Live Search — лёгкий плагин с AJAX-поиском и поддержкой кастомных типов записей.

Для интеграции с плагинами WPGPT или Clearfy Pro можно использовать их возможности оптимизации и расширения функционала поиска, например, фильтрацию индекса поиска или управление кэшированием результатов.

Советы по улучшению автозаполнения и безопасности

При реализации автозаполнения учитывайте следующие моменты:

• Используйте дебаунсинг (задержку) при отправке AJAX-запросов, чтобы не перегружать сервер;
• Ограничивайте количество возвращаемых подсказок (например, 5-10) для скорости и удобства;
• Обрабатывайте и фильтруйте входящие данные, чтобы избежать XSS и SQL-инъекций;
• Поддерживайте адаптивность и мобильность интерфейса подсказок;
• Кешируйте популярные запросы для снижения нагрузки на сервер.

Например, можно добавить кеширование в REST API через Transient API WordPress:

function wpplugins_autocomplete_callback(WP_REST_Request $request) {
    $search = sanitize_text_field($request->get_param('q'));
    if (empty($search)) {
        return [];
    }

    $cache_key = 'wpplugins_autocomplete_' . md5($search);
    $results = get_transient($cache_key);
    if ($results !== false) {
        return $results;
    }

    $args = [
        's' => $search,
        'post_type' => 'post',
        'posts_per_page' => 10,
    ];

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

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

    set_transient($cache_key, $results, HOUR_IN_SECONDS);

    return $results;
}

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

Автозаполняемые поля — мощный инструмент повышения удобства пользователей сайта. Реализовать их можно как с помощью REST API и собственного JavaScript, так и используя готовые плагины. Важно уделять внимание безопасности, производительности и адаптивности интерфейса.

Если хотите расширить функционал поиска, советую ознакомиться с плагинами из WPShop.ru, которые помогут оптимизировать и кастомизировать поиск и автозаполнение под задачи вашего проекта.