Автоматизация ввода данных в формы на сайтах WordPress помогает повысить удобство для пользователей и снизить количество ошибок при заполнении. Особенно это важно для сложных форм с большим количеством полей, адресов, контактных данных или других повторяющихся элементов. В этой статье разберём, как реализовать автозаполнение форм с помощью JavaScript и AJAX, используя нативные возможности WordPress. Это позволит загружать данные с сервера динамически, без перезагрузки страницы.
Зачем нужно автозаполнение форм и где его применять
Автозаполнение форм улучшает UX, сокращая время на ввод данных. Это актуально для:
- Регистрационных и контактных форм;
- Форм оформления заказов (например, WooCommerce);
- Форм с адресами доставки, где можно подгружать данные по почтовому индексу или городу;
- Форм поиска с подсказками;
- Форм обратной связи с повторяющимися полями.
Реализация автозаполнения с помощью AJAX и JS позволяет получать данные с сервера без перезагрузки и обновлять поля динамически.
Подготовка: создание пользовательского AJAX обработчика в WordPress
Для начала создадим AJAX обработчик, который будет отдавать данные для автозаполнения. Добавим следующий код в functions.php вашей темы или в плагин:
add_action('wp_ajax_wpbuy_get_autofill_data', 'wpbuy_get_autofill_data');
add_action('wp_ajax_nopriv_wpbuy_get_autofill_data', 'wpbuy_get_autofill_data');
function wpbuy_get_autofill_data() {
// Проверка nonce для безопасности
check_ajax_referer('wpbuy_autofill_nonce', 'security');
$query = isset($_GET['query']) ? sanitize_text_field($_GET['query']) : '';
$results = [];
if (!empty($query)) {
// Пример: поиск городов по введённой части названия
$cities = ['Москва', 'Мурманск', 'Минск', 'Магнитогорск', 'Махачкала'];
foreach ($cities as $city) {
if (mb_stripos($city, $query) !== false) {
$results[] = $city;
}
}
}
wp_send_json_success($results);
}В этом примере AJAX обработчик фильтрует список городов по введённой строке (query) и возвращает совпадения. В реальном проекте можно заменить массив на запрос к базе или внешнему API.
Подключение скрипта и локализация данных для AJAX
Теперь нужно подключить JavaScript файл и передать ему параметры AJAX вызова. Добавьте в functions.php:
function wpbuy_enqueue_autofill_script() {
wp_enqueue_script('wpbuy-autofill', get_template_directory_uri() . '/js/wpbuy-autofill.js', ['jquery'], null, true);
wp_localize_script('wpbuy-autofill', 'wpbuy_autofill_obj', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpbuy_autofill_nonce'),
]);
}
add_action('wp_enqueue_scripts', 'wpbuy_enqueue_autofill_script');Этот код загружает файл wpbuy-autofill.js из папки темы и передаёт AJAX URL и nonce для безопасности.
Реализация автозаполнения на стороне JavaScript
Создайте файл wpbuy-autofill.js в папке js темы и добавьте следующий код:
jQuery(document).ready(function($) {
var $input = $('#wpbuy-autofill-input');
var $list = $('<ul></ul>').addClass('wpbuy-autofill-list').css({
'border': '1px solid #ccc',
'max-height': '150px',
'overflow-y': 'auto',
'position': 'absolute',
'background': '#fff',
'width': $input.outerWidth()
}).hide();
$input.after($list);
$input.on('input', function() {
var val = $(this).val();
if (val.length < 2) {
$list.empty().hide();
return;
}
$.ajax({
url: wpbuy_autofill_obj.ajax_url,
data: {
action: 'wpbuy_get_autofill_data',
security: wpbuy_autofill_obj.nonce,
query: val
},
dataType: 'json',
success: function(response) {
if (response.success && response.data.length) {
$list.empty();
$.each(response.data, function(i, item) {
$('<li></li>').text(item).css({
'padding': '5px',
'cursor': 'pointer'
}).appendTo($list).on('click', function() {
$input.val(item);
$list.empty().hide();
});
});
$list.show();
} else {
$list.empty().hide();
}
}
});
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.wpbuy-autofill-list, #wpbuy-autofill-input').length) {
$list.empty().hide();
}
});
});Здесь мы создаём выпадающий список под полем ввода с id wpbuy-autofill-input. При вводе текста отправляем AJAX запрос на сервер, получаем список подходящих значений и отображаем их. По клику на пункт списка он вставляется в поле.
Добавление формы и стилизация
Вставьте в нужное место шаблона или в контент страницы следующий HTML:
<label for="wpbuy-autofill-input">Введите город:</label>
<input type="text" id="wpbuy-autofill-input" autocomplete="off" />Для улучшения отображения добавьте в файл стилей темы или в <style>:
.wpbuy-autofill-list li:hover {
background-color: #f0f0f0;
}Дополнительные советы по безопасности и расширению
Важно всегда проверять nonce в AJAX обработчиках для защиты от CSRF атак. Не стоит слепо доверять пользовательскому вводу — очищайте и валидируйте данные.
Для расширения функционала можно:
- Добавить поддержку клавиш клавиатуры (стрелки вверх/вниз, Enter) для удобства;
- Подгружать данные из базы постов или пользовательских таксономий;
- Использовать данный подход для автозаполнения других полей — телефонов, адресов, категорий;
- Интегрировать с плагинами, например, с WooCommerce для автозаполнения адресов доставки, либо с плагином Clearfy Pro для улучшения производительности AJAX запросов.
Вывод
Автозаполнение форм с помощью JavaScript и AJAX в WordPress — мощный инструмент для улучшения удобства пользователей и повышения конверсии. Следуя описанным шагам, вы сможете создать лёгкое и расширяемое решение, адаптированное под свои задачи и данные.
Подробное руководство с примерами кода поможет внедрить автозаполнение даже начинающим разработчикам, а опытные смогут расширить функционал под свои проекты.
Если хотите дополнительно оптимизировать работу сайта, обратите внимание на продукты Clearfy Pro для тонкой настройки и ускорения AJAX запросов и общих процессов WordPress.