Как создать автозаполняемую форму в WordPress с помощью AJAX и REST API

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

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

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

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

Реализация автозаполнения через AJAX и REST API позволяет не только динамически подгружать данные, но и легко масштабировать функционал, используя стандартные механизмы WordPress.

Подготовка REST API endpoint для автозаполнения

Первым шагом создадим REST API endpoint, который будет возвращать данные для автозаполнения. Предположим, нам нужно подгружать названия постов из определенного типа записей.

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

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

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

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 10,
        's' => $search,
        'fields' => 'ids'
    );

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

    if ($query->have_posts()) {
        foreach ($query->posts as $post_id) {
            $results[] = array(
                'id' => $post_id,
                'title' => get_the_title($post_id)
            );
        }
    }

    return $results;
}

В этом коде регистрируется маршрут REST API /wp-json/wpquery/v1/autocomplete/, который принимает параметр q — поисковый запрос. В ответ возвращается массив объектов с ID и заголовком поста.

Безопасность и оптимизация запроса

Здесь мы используем sanitize_text_field для фильтрации входных данных. В реальном проекте можно добавить проверку прав доступа, если данные должны быть закрыты.

Кроме того, поиск с параметром 'fields' => 'ids' позволяет получить только ID постов, что уменьшает нагрузку на базу данных.

Создание фронтенд-формы с автозаполнением

Теперь создадим HTML-форму и добавим JavaScript, который будет отправлять AJAX-запросы к нашему REST API и отображать результаты.

HTML-пример формы:

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

JavaScript с использованием jQuery для упрощения:

jQuery(document).ready(function($) {
    var $input = $('#wpquery-autocomplete');
    var $results = $('#wpquery-autocomplete-results');

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

        $.ajax({
            url: wpApiSettings.root + 'wpquery/v1/autocomplete/',
            data: { q: query },
            beforeSend: function(xhr) {
                xhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);
            },
            success: function(data) {
                if (data.length) {
                    var html = '';
                    data.forEach(function(item) {
                        html += '<div class="wpquery-autocomplete-item" data-id="' + item.id + '" style="padding:5px; cursor:pointer;">' + item.title + '</div>';
                    });
                    $results.html(html).show();
                } else {
                    $results.hide();
                }
            },
            error: function() {
                $results.hide();
            }
        });
    });

    $results.on('click', '.wpquery-autocomplete-item', function() {
        var title = $(this).text();
        var id = $(this).data('id');
        $input.val(title);
        $results.hide();
        // Можно сохранить выбранный ID в скрытое поле или использовать дальше
        console.log('Выбран пост ID:', id);
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#wpquery-autocomplete, #wpquery-autocomplete-results').length) {
            $results.hide();
        }
    });
});

Этот скрипт подгружает данные по мере ввода текста, показывая список вариантов. При клике на вариант поле заполняется выбранным значением, а список скрывается.

Подключение скриптов и локализация данных

Чтобы получить объект wpApiSettings с необходимыми параметрами, подключите скрипт с помощью функции wp_enqueue_script и локализуйте его:

function wpquery_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('wpquery-autocomplete', get_template_directory_uri() . '/js/wpquery-autocomplete.js', array('jquery'), '1.0', true);
    wp_localize_script('wpquery-autocomplete', 'wpApiSettings', array(
        'root' => esc_url_raw(rest_url()),
        'nonce' => wp_create_nonce('wp_rest')
    ));
}
add_action('wp_enqueue_scripts', 'wpquery_enqueue_scripts');

В данном примере файл wpquery-autocomplete.js содержит JS-код из предыдущего блока.

Использование плагинов для расширения функционала

Если вы предпочитаете готовые решения, можно обратить внимание на следующие плагины, которые облегчают создание автозаполняемых форм:

• Expert Review — плагин с расширенными возможностями создания форм и отзывов с автозаполнением.
• WPRemark — позволяет создавать формы с динамическими полями и автозаполнением на основе пользовательских данных.

Использование этих плагинов поможет ускорить разработку и добавить дополнительные функции без глубокого погружения в код.

Советы по оптимизации и расширению

1. Кэшируйте результаты запроса на стороне сервера или клиента, чтобы снизить нагрузку при повторяющихся запросах.

2. Добавьте дебаунсинг в JavaScript, чтобы не отправлять запросы при каждом нажатии клавиши, а с задержкой, например 300-500 мс.

3. При большом объеме данных используйте более сложные алгоритмы поиска или ограничивайте количество возвращаемых результатов.

4. Если форма используется в админке, убедитесь, что REST API доступен только для авторизованных пользователей.

5. Можно расширить функционал, добавив поддержку нескольких полей с автозаполнением и связать их между собой.