Как создать автозаполняемое поле в WordPress с помощью JS и AJAX

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

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

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

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

Подготовка: регистрация AJAX обработчика в WordPress

Первый шаг — зарегистрировать обработчик AJAX-запросов в WordPress. Это делается в файле functions.php вашей темы или в плагине. Ниже пример кода с префиксом wpmax_, чтобы избежать конфликтов:

add_action('wp_ajax_wpmax_autocomplete', 'wpmax_autocomplete_callback');
add_action('wp_ajax_nopriv_wpmax_autocomplete', 'wpmax_autocomplete_callback');

function wpmax_autocomplete_callback() {
    $term = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    $results = [];

    if (!empty($term)) {
        $query_args = [
            'post_type' => 'post',
            's' => $term,
            'posts_per_page' => 10,
        ];
        $query = new WP_Query($query_args);

        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);
}

Здесь мы обрабатываем параметр term, ищем посты по названию и возвращаем массив с вариантами для автозаполнения.

Создание фронтенда: HTML и JavaScript для поля автозаполнения

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

Пример HTML:

<input type="text" id="wpmax-autocomplete" placeholder="Поиск постов..." autocomplete="off" />
<div id="wpmax-autocomplete-results" style="border:1px solid #ccc; max-height:150px; overflow-y:auto; display:none; position:absolute; background:#fff; width:300px;"></div>

JavaScript с использованием чистого JS:

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

    let timer = null;

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

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

        timer = setTimeout(() => {
            fetch(`/wp-admin/admin-ajax.php?action=wpmax_autocomplete&term=` + encodeURIComponent(term))
                .then(response => response.json())
                .then(data => {
                    resultsContainer.innerHTML = '';
                    if (data.length) {
                        data.forEach(item => {
                            const div = document.createElement('div');
                            div.textContent = item.label;
                            div.style.padding = '5px';
                            div.style.cursor = 'pointer';
                            div.addEventListener('click', () => {
                                input.value = item.value;
                                resultsContainer.style.display = 'none';
                            });
                            resultsContainer.appendChild(div);
                        });
                        resultsContainer.style.display = 'block';
                    } else {
                        resultsContainer.style.display = 'none';
                    }
                });
        }, 300); // задержка для оптимизации запросов
    });

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

В этом скрипте мы используем fetch для отправки запроса к серверу и вывода результатов в блок под полем ввода.

Оптимизация и безопасность: что важно учесть

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

• Использовать wp_localize_script для передачи URL AJAX и nonce для безопасности.
• Добавить проверку прав пользователя, если данные чувствительны.
• Ограничить по количеству запросов и использовать кеширование для снижения нагрузки.
• Обрабатывать ошибки AJAX и информировать пользователя.

Например, регистрация скрипта с локализацией в functions.php:

function wpmax_enqueue_scripts() {
    wp_enqueue_script('wpmax-autocomplete', get_template_directory_uri() . '/js/wpmax-autocomplete.js', [], null, true);
    wp_localize_script('wpmax-autocomplete', 'wpmax_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpmax_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpmax_enqueue_scripts');

Интеграция с плагинами WPShop для расширения функционала

Если вы используете плагины с wpshop.ru, например, Expert Review для отзывов или WPRemark для комментариев, автозаполнение можно адаптировать для поиска отзывов или авторов.

Для этого в AJAX-обработчике меняйте post_type и параметры запроса, учитывая специфику плагина. Это позволит создавать мощные интерфейсы с удобным вводом и быстрым доступом к данным.

Заключение (безводное резюме)

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