Как создать функцию автоподсказки в WordPress с примерами кода

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

Что такое автоподсказка и зачем она нужна в WordPress?

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

Основные преимущества автоподсказки:

• Ускоряет ввод и повышает удобство;
• Снижает вероятность ошибок;
• Позволяет делать интерфейс более интерактивным и современным.

Реализовать автоподсказку можно через JavaScript, отправляя AJAX-запросы к серверу, который возвращает список подходящих вариантов.

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

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

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

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

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

    // Пример: поиск по заголовкам записей
    $posts = get_posts(array(
        's' => $term,
        'post_type' => 'post',
        'posts_per_page' => 10,
        'fields' => 'ids',
    ));

    $results = [];
    foreach ($posts as $post_id) {
        $results[] = get_the_title($post_id);
    }

    return $results;
}

Этот код создаёт маршрут /wp-json/wpexamples/v1/autocomplete, который принимает параметр term и возвращает массив названий постов, содержащих этот термин.

Подключение JavaScript: отправка запросов и отображение подсказок

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

Добавим в вашу тему или плагин следующий код для подключения скрипта и передачи URL API:

function wpexamples_enqueue_scripts() {
    wp_enqueue_script('wpexamples-autocomplete', get_template_directory_uri() . '/js/autocomplete.js', array('jquery'), null, true);
    wp_localize_script('wpexamples-autocomplete', 'wpexamplesData', array(
        'apiUrl' => esc_url_raw(rest_url('wpexamples/v1/autocomplete')),
    ));
}
add_action('wp_enqueue_scripts', 'wpexamples_enqueue_scripts');

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

jQuery(document).ready(function($) {
    var $input = $('#wpexamples-autocomplete-input');
    var $list = $('<ul></ul>').css({
        'border': '1px solid #ccc',
        'position': 'absolute',
        'background': '#fff',
        'list-style': 'none',
        'padding': '0',
        'margin': '0',
        'max-height': '200px',
        'overflow-y': 'auto',
        'width': $input.outerWidth()
    }).hide();

    $input.after($list);

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

        $.getJSON(wpexamplesData.apiUrl, { term: term }, function(data) {
            $list.empty();
            if (data.length === 0) {
                $list.hide();
                return;
            }

            $.each(data, function(i, item) {
                var $li = $('<li></li>').text(item).css({
                    'padding': '5px',
                    'cursor': 'pointer'
                }).appendTo($list);

                $li.on('mousedown', function() { // mousedown чтобы сработало до blur
                    $input.val(item);
                    $list.hide();
                });
            });
            $list.show();
        });
    });

    // Скрыть список при потере фокуса
    $input.on('blur', function() {
        setTimeout(function() {
            $list.hide();
        }, 200);
    });
});

Пример использования: добавляем поле с автоподсказкой в форму

Чтобы проверить работу функции, вставьте в нужное место вашей темы или плагина следующий HTML-код:

<input type="text" id="wpexamples-autocomplete-input" placeholder="Начните вводить название..." autocomplete="off" />

После этого при вводе текста в поле будет выполняться AJAX-запрос к REST API и отображаться подсказки с названиями постов.

Расширение функционала: автоподсказка для пользовательских данных

Наш пример ищет только по заголовкам стандартных записей. Вы можете расширить функцию wpexamples_autocomplete_callback для поиска по:

• Произвольным типам записей;
• Пользовательским полям (meta_query);
• Пользователям сайта;
• Категориям и таксономиям.

Например, для поиска пользователей по логину и имени используйте:

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

    $users = get_users(array(
        'search' => "*" . $term . "*",
        'search_columns' => array('user_login', 'user_nicename', 'display_name'),
        'number' => 10,
    ));

    $results = [];
    foreach ($users as $user) {
        $results[] = $user->display_name . ' (' . $user->user_login . ')';
    }

    return $results;
}

Рекомендации по безопасности и производительности

При реализации автоподсказки важно учитывать нагрузку на сервер. Ограничивайте количество возвращаемых результатов, используйте кэширование ответов и минимальное количество данных.

Также не забывайте про безопасность: фильтруйте входные данные, чтобы избежать XSS и SQL-инъекций. В нашем примере мы используем sanitize_text_field, а REST API по умолчанию защищён nonce при авторизованных запросах — для публичных запросов важно ограничить разрешения или добавить дополнительные проверки.

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

Если вы хотите ускорить разработку, можно использовать плагины с поддержкой автоподсказки. Например, ABC Pagination поддерживает удобные фильтры и поисковые автоподсказки.

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

Выводы и советы по внедрению

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

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

Если нужна помощь с кастомизацией или интеграцией, можно использовать готовые решения из каталога WPSHOP.