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

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

Основы создания автозаполняемых полей в WordPress

Для реализации автозаполнения необходима форма с полем ввода, которое будет динамически запрашивать данные с сервера. При каждом вводе символа на стороне клиента срабатывает JavaScript, который отправляет AJAX-запрос к серверу. Сервер обрабатывает запрос, ищет подходящие варианты и возвращает их в формате JSON. Затем JavaScript отображает варианты пользователю.

В WordPress для AJAX-запросов используется специальный обработчик, который регистрируется в functions.php или в плагине. Он обрабатывает запросы, проверяет права пользователя (если нужно) и возвращает результаты.

В качестве примера рассмотрим создание автозаполнения по названиям постов.

Регистрация AJAX-обработчика в WordPress

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

add_action('wp_ajax_hueman_autocomplete_posts', 'hueman_autocomplete_posts_callback');
add_action('wp_ajax_nopriv_hueman_autocomplete_posts', 'hueman_autocomplete_posts_callback');

function hueman_autocomplete_posts_callback() {
    // Получаем параметр запроса
    $search = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    $results = [];

    if (strlen($search) >= 2) {
        $query = new WP_Query([
            's' => $search,
            'post_type' => 'post',
            'posts_per_page' => 10,
            'post_status' => 'publish',
        ]);

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

    wp_send_json($results);
    wp_die();
}

Этот код регистрирует обработчик AJAX-запросов для авторизованных и неавторизованных пользователей. По параметру term он ищет посты с похожими названиями и возвращает массив подходящих вариантов.

Создание JavaScript для вызова AJAX и отображения автозаполнения

Для фронтенда используем jQuery UI Autocomplete — удобную библиотеку для автозаполнения. Подключите её в теме, если ещё не подключена:

function hueman_enqueue_autocomplete_scripts() {
    wp_enqueue_script('jquery-ui-autocomplete');
    wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');

    wp_enqueue_script('hueman-autocomplete', get_template_directory_uri() . '/js/hueman-autocomplete.js', ['jquery', 'jquery-ui-autocomplete'], null, true);
    wp_localize_script('hueman-autocomplete', 'huemanAutocomplete', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('hueman_autocomplete_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_autocomplete_scripts');

Создайте файл hueman-autocomplete.js в папке js вашей темы с таким содержимым:

jQuery(document).ready(function($) {
    $('#hueman-autocomplete-input').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: huemanAutocomplete.ajax_url,
                dataType: 'json',
                data: {
                    action: 'hueman_autocomplete_posts',
                    term: request.term,
                },
                success: function(data) {
                    response(data);
                },
                error: function() {
                    response([]);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            console.log('Выбран элемент:', ui.item);
        }
    });
});

Этот скрипт привязывает автозаполнение к полю с ID hueman-autocomplete-input. При вводе от 2 символов отправляется AJAX-запрос к серверу, и результаты отображаются в выпадающем списке.

Добавление поля в форму

Вставьте в нужное место формы следующий HTML:

<input type="text" id="hueman-autocomplete-input" name="post_title" placeholder="Начните вводить название поста" autocomplete="off" />

Это поле будет использоваться для ввода и автозаполнения.

Дополнительные советы по безопасности и производительности

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

function hueman_autocomplete_posts_callback() {
    check_ajax_referer('hueman_autocomplete_nonce', 'nonce');
    // далее код обработки запроса
}

Также желательно ограничить количество возвращаемых результатов и минимальную длину запроса, чтобы снизить нагрузку на сервер.

Пример использования плагина для автозаполнения

Если вы предпочитаете готовые решения, обратите внимание на плагин WPRemark, который поддерживает расширенные формы с автозаполнением и интеграцией AJAX. Он позволяет создавать сложные формы с автодополнением без программирования.

Заключение

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