Как создать выпадающий список с автоподстановкой в WordPress

В современных интерфейсах пользовательского взаимодействия выпадающие списки с автоподстановкой (autocomplete) значительно упрощают ввод данных и поиск нужной информации. В WordPress такая функциональность полезна для форм поиска, фильтров, админпанели и фронтенда сайта. В этой статье мы подробно разберём, как создать кастомный выпадающий список с автоподстановкой, используя AJAX, PHP и jQuery, без сторонних плагинов, чтобы получить быстрый и гибкий инструмент.

Почему стоит делать свой выпадающий список с автоподстановкой в WordPress

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

• Лёгкую и быструю загрузку данных через AJAX, без перезагрузки страницы.
• Возможность фильтровать варианты на сервере по мере ввода пользователя.
• Полный контроль над дизайном и функционалом.
• Отсутствие лишних зависимостей и ускорение работы сайта.

Далее рассмотрим детальный пример, как это реализовать.

Подготовка: подключение скриптов и стили

Для работы нам понадобится jQuery UI Autocomplete, который уже встроен в WordPress, достаточно его подключить.

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

function wproot_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('wproot-autocomplete', get_template_directory_uri() . '/js/wproot-autocomplete.js', array('jquery', 'jquery-ui-autocomplete'), '1.0', true);
    wp_localize_script('wproot-autocomplete', 'wproot_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wproot_autocomplete_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wproot_enqueue_autocomplete_scripts');

В этом коде мы:

• Подключаем стандартный jQuery UI Autocomplete.
• Подключаем стили для виджета из CDN.
• Подключаем собственный скрипт wproot-autocomplete.js, который реализует логику на стороне клиента.
• Передаём AJAX URL и nonce для безопасности.

Клиентская часть: JavaScript для автоподстановки

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

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

Объяснение:

• При вводе в поле с ID wproot-autocomplete-input вызывается AJAX-запрос на сервер с параметром term.
• Сервер возвращает JSON-массив подходящих вариантов.
• По минимуму 2 символа запускается автоподстановка.
• При выборе варианта в консоль выводится выбранное значение (можно заменить на любое другое действие).

HTML-разметка поля ввода

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

<input type="text" id="wproot-autocomplete-input" placeholder="Введите название..." />

Обработка AJAX-запроса на сервере

Добавьте в functions.php следующий обработчик для AJAX-запроса:

function wproot_handle_autocomplete() {
    check_ajax_referer('wproot_autocomplete_nonce', 'nonce');

    $term = isset($_POST['term']) ? sanitize_text_field(wp_unslash($_POST['term'])) : '';
    $results = array();

    if (strlen($term) >= 2) {
        // Пример поиска по постам типа 'post'
        $query = new WP_Query(array(
            'post_type' => 'post',
            's' => $term,
            'posts_per_page' => 10,
            'post_status' => 'publish',
        ));

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

    wp_send_json($results);
}
add_action('wp_ajax_wproot_autocomplete_search', 'wproot_handle_autocomplete');
add_action('wp_ajax_nopriv_wproot_autocomplete_search', 'wproot_handle_autocomplete');

Что здесь происходит:

• Проверяется nonce для безопасности.
• Получается поисковый запрос term.
• Выполняется WP_Query поиска по заголовкам постов.
• Формируется массив с метками и значениями для автокомплита.
• Отправляется ответ в формате JSON.

Расширение: подключение автоподстановки к произвольным типам данных

Вы можете заменить WP_Query на поиск по произвольным таксономиям, метаданным или кастомным типам постов. Например, для поиска по метаполю:

$query = new WP_Query(array(
    'post_type' => 'product',
    'posts_per_page' => 10,
    'post_status' => 'publish',
    'meta_query' => array(
        array(
            'key' => '_sku',
            'value' => $term,
            'compare' => 'LIKE'
        )
    ),
));

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

Полезные плагины для расширения возможностей автоподстановки

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

• Clearfy Pro — оптимизация и расширение функционала, включая улучшения форм.
• WPStories — визуальные элементы, которые могут быть полезны для создания динамичных форм.

Однако для лёгкой и кастомной автоподстановки описанный выше код даёт полный контроль и минимизирует нагрузку.

Советы по оптимизации и безопасности

Не забывайте:

• Ограничивать количество возвращаемых результатов (например, 10-15), чтобы не перегружать страницу.
• Использовать wp_cache или transient API для кеширования часто запрашиваемых значений.
• Всегда проверять nonce и права текущего пользователя, если данные чувствительные.
• Минимизировать размер передаваемых данных, отправляя только необходимые поля.

Соблюдая эти рекомендации, вы получите быстрый и безопасный функционал автоподстановки.

Заключение

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