Как сделать автоподсказку в опросе WordPress для повышения удобства пользователей

Автор: Павел Фомин | Опубликовано: 18.01.2026

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

Почему автоподсказка важна для опросов WordPress

Когда пользователю нужно вводить длинные или сложные ответы, автоподсказка помогает:

ускорить ввод данных;
сократить количество ошибок;
сделать интерфейс интуитивно понятным;
повысить вовлечённость и вероятность заполнения опроса.

Для сайтов с большим количеством вопросов или специфическими вариантами ответов автоподсказка становится необходимой.

Подключение автоподсказки в опросах на WordPress с помощью плагина Quizle

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

Установите и активируйте Quizle.
При создании вопроса выберите тип поля "Текст с автоподсказкой".
В настройках вопроса укажите список вариантов подсказок через запятую или загрузите JSON с данными.

Плагин автоматически подключит необходимые JavaScript-библиотеки и будет показывать варианты при вводе символов.

Преимущество использования Quizle — простота настройки, готовый UI и интеграция с системой опросов.

Реализация автоподсказки с помощью jQuery UI Autocomplete и кастомного кода

Если вы хотите более гибко настроить автоподсказку или использовать свой опросный плагин, можно добавить автоподсказку вручную с помощью jQuery UI. Вот пример, как это реализовать.

Подключение библиотек

Добавьте подключение jQuery UI в functions.php вашей темы или через плагин:

function wppolls_enqueue_autocomplete() {
    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');
}
add_action('wp_enqueue_scripts', 'wppolls_enqueue_autocomplete');

HTML поля опроса с автоподсказкой

В нужном месте формы опроса добавьте поле ввода с уникальным id:

<input type="text" id="wppolls-city-autocomplete" name="wppolls_city" placeholder="Введите город" />

JavaScript для автоподсказки

Добавьте следующий скрипт, который будет подгружать подсказки из массива:

jQuery(document).ready(function($) {
    var cities = ["Москва", "Санкт-Петербург", "Казань", "Новосибирск", "Екатеринбург", "Нижний Новгород", "Ростов-на-Дону"];
    $('#wppolls-city-autocomplete').autocomplete({
        source: cities,
        minLength: 2
    });
});

Этот код можно вставить в footer.php или подключить отдельным JavaScript-файлом.

Динамическая загрузка подсказок через AJAX

Если список подсказок слишком большой, лучше загружать данные динамически с сервера. Пример AJAX-обработчика в functions.php:

add_action('wp_ajax_wppolls_get_cities', 'wppolls_get_cities_callback');
add_action('wp_ajax_nopriv_wppolls_get_cities', 'wppolls_get_cities_callback');
function wppolls_get_cities_callback() {
    $term = sanitize_text_field($_GET['term']);
    $all_cities = ["Москва", "Санкт-Петербург", "Казань", "Новосибирск", "Екатеринбург", "Нижний Новгород", "Ростов-на-Дону"];
    $matches = array_filter($all_cities, function($city) use ($term) {
        return stripos($city, $term) !== false;
    });
    wp_send_json(array_values($matches));
}

И измените JS для запроса на сервер:

$('#wppolls-city-autocomplete').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: wppolls_ajax_object.ajax_url,
            dataType: 'json',
            data: {
                action: 'wppolls_get_cities',
                term: request.term
            },
            success: function(data) {
                response(data);
            }
        });
    },
    minLength: 2
});

Обработка данных автоподсказки при сохранении опроса

Чтобы сохранить ответы пользователя, нужно обработать данные из поля автоподсказки в PHP. Например, в обработчике формы опроса:

function wppolls_handle_form_submission() {
    if (isset($_POST['wppolls_city'])) {
        $city = sanitize_text_field($_POST['wppolls_city']);
        // Сохраните или обработайте $city как ответ пользователя
    }
}
add_action('init', 'wppolls_handle_form_submission');

Не забудьте обеспечить безопасность и валидацию данных.

Дополнительные советы и рекомендации по автоподсказкам в опросах WordPress

Удобство и UX

Следите, чтобы подсказки были релевантны вопросу и не перегружали интерфейс. Минимальная длина вводимых символов для загрузки подсказок обычно 2-3, чтобы избежать лишних запросов.

Производительность

При большом списке вариантов используйте AJAX для динамической подгрузки данных. Кэшируйте результаты на сервере, чтобы снизить нагрузку.

Совместимость с плагинами опросов

Если вы используете плагин Quizle, Expert Review или другие, проверьте, можно ли встроить в их формы собственный HTML/JS для автоподсказок. Иногда достаточно расширить существующие поля через хуки.

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

Quizle позволяет использовать кастомные поля с HTML и JS. Вы можете встроить свой скрипт автоподсказки в вопрос с типом "Текст" через редактор вопросов. Подробнее на странице плагина Quizle.