Как создать автоподстановку в формах WordPress с помощью JavaScript

Автор: Ярослав Захаров | Опубликовано: 24.12.2025

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

Почему стоит сделать автоподстановку в формах WordPress

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

Конечно, можно использовать готовые плагины, например, Clearfy Pro содержит множество оптимизаций, но в некоторых случаях легковесное решение на JavaScript без плагинов будет эффективнее.

Подготовка данных для автоподстановки

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

Пример запроса для получения всех категорий:

function wplinks_get_categories_list() {
    $categories = get_categories(array('hide_empty' => false));
    $list = array();
    foreach ($categories as $cat) {
        $list[] = $cat->name;
    }
    return $list;
}

Вы можете вывести этот массив в JavaScript через локализацию скриптов, чтобы использовать его для автоподстановки.

Реализация простого автокомплита на JavaScript

Создадим простой JavaScript код для автоподстановки, без зависимостей:

document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('wplinks-autocomplete-input');
    const suggestions = document.getElementById('wplinks-autocomplete-suggestions');
    const data = wplinksAutocompleteData; // массив данных от PHP

    input.addEventListener('input', function() {
        const val = this.value.toLowerCase();
        suggestions.innerHTML = '';
        if (!val) return;
        const filtered = data.filter(function(item) {
            return item.toLowerCase().startsWith(val);
        });
        filtered.forEach(function(item) {
            const div = document.createElement('div');
            div.textContent = item;
            div.classList.add('wplinks-suggestion-item');
            div.addEventListener('click', function() {
                input.value = item;
                suggestions.innerHTML = '';
            });
            suggestions.appendChild(div);
        });
    });

    document.addEventListener('click', function(e) {
        if (e.target !== input) {
            suggestions.innerHTML = '';
        }
    });
});

HTML разметка для формы:

<input type="text" id="wplinks-autocomplete-input" name="category" autocomplete="off" placeholder="Выберите категорию"/>
<div id="wplinks-autocomplete-suggestions" class="wplinks-suggestions-box"></div>

CSS стили для подсказок:

.wplinks-suggestions-box {
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    background: white;
    width: 100%;
    z-index: 9999;
}
.wplinks-suggestion-item {
    padding: 5px 10px;
    cursor: pointer;
}
.wplinks-suggestion-item:hover {
    background-color: #f0f0f0;
}

Локализация данных из PHP в JavaScript

Чтобы передать массив данных из PHP в JavaScript, используйте функцию wp_localize_script. Пример в functions.php:

function wplinks_enqueue_scripts() {
    wp_enqueue_script('wplinks-autocomplete', get_template_directory_uri() . '/js/wplinks-autocomplete.js', array(), '1.0', true);
    $data = wplinks_get_categories_list();
    wp_localize_script('wplinks-autocomplete', 'wplinksAutocompleteData', $data);
}
add_action('wp_enqueue_scripts', 'wplinks_enqueue_scripts');

Расширенные возможности автоподстановки

Для более сложных сценариев можно реализовать AJAX-автоподстановку. Это позволит подгружать данные динамически, например, при большом количестве вариантов. Вот ключевые моменты:

Создайте обработчик AJAX в WordPress с помощью add_action('wp_ajax_...') и add_action('wp_ajax_nopriv_...').
Сделайте JavaScript запрос с текущим вводом пользователя.
Верните JSON с вариантами и отобразите их в подсказках.

Пример AJAX-обработчика в functions.php:

function wplinks_ajax_autocomplete() {
    $term = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    $results = array();
    if ($term) {
        $categories = get_categories(array('hide_empty' => false, 'search' => $term));
        foreach ($categories as $cat) {
            $results[] = $cat->name;
        }
    }
    wp_send_json($results);
}
add_action('wp_ajax_wplinks_autocomplete', 'wplinks_ajax_autocomplete');
add_action('wp_ajax_nopriv_wplinks_autocomplete', 'wplinks_ajax_autocomplete');

JavaScript для вызова AJAX:

input.addEventListener('input', function() {
    const val = this.value.trim();
    if (!val) {
        suggestions.innerHTML = '';
        return;
    }
    fetch(`/wp-admin/admin-ajax.php?action=wplinks_autocomplete&term=${encodeURIComponent(val)}`)
        .then(response => response.json())
        .then(data => {
            suggestions.innerHTML = '';
            data.forEach(item => {
                const div = document.createElement('div');
                div.textContent = item;
                div.classList.add('wplinks-suggestion-item');
                div.addEventListener('click', () => {
                    input.value = item;
                    suggestions.innerHTML = '';
                });
                suggestions.appendChild(div);
            });
        });
});

Использование готовых решений и плагинов

Если хотите получить готовый и расширяемый функционал, рассмотрите плагины автоподстановки. Некоторые из них интегрируются с популярными формами (Contact Form 7, Gravity Forms), например:

Expert Review — имеет не только отзывы, но и расширенную работу с формами.
Плагин WP Remark для улучшения UX форм.

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

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

При работе с автоподстановкой обратите внимание на следующие моменты:

Фильтруйте все входные данные через sanitize_text_field или аналогичные функции.
Ограничьте количество подставляемых вариантов, чтобы не перегружать интерфейс.
Кешируйте результаты запросов, если данные редко меняются.
Добавьте задержку (debounce) на ввод, чтобы не отправлять слишком много AJAX-запросов.

Пример debounce на JavaScript:

function wplinks_debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

Используйте её для обертки обработчика input.