Автозаполнение форм существенно повышает удобство пользователей и снижает количество ошибок при вводе данных. В WordPress можно реализовать такую функциональность с помощью AJAX, что позволяет подгружать данные динамически без перезагрузки страницы. В этой статье подробно разберём, как создать автозаполнение формы на примере поля для выбора пользователя, используя стандартные возможности WordPress и AJAX.
Почему автозаполнение форм важно для сайта на WordPress
Автозаполнение помогает быстро находить нужные значения, особенно если их много. Например, при выборе автора, категории, продукта или города в форме. Это экономит время и улучшает UX.
Кроме того, AJAX-автозаполнение снижает нагрузку на сервер и количество ошибок, потому что данные подгружаются по мере ввода и проверяются сразу.
Самостоятельная реализация автозаполнения даёт полный контроль над логикой и дизайном, в отличие от готовых плагинов, которые могут быть тяжеловесными или не подходить под задачи.
Общая схема работы AJAX автозаполнения в WordPress
Работа делится на две части:
- JavaScript на фронтенде, который отслеживает ввод пользователя, отправляет AJAX-запросы на сервер и получает результаты;
- PHP-обработчик на стороне WordPress, который принимает запрос, выполняет поиск по базе и возвращает данные в формате JSON.
В WordPress для AJAX-запросов принято использовать специальный хук wp_ajax_{action} (для авторизованных пользователей) и wp_ajax_nopriv_{action} (для гостей).
Пример реализации автозаполнения поля выбора пользователя
1. HTML и подключение JS
Создаём поле ввода и подключаем скрипт. Для примера добавим код в шаблон или плагин:
<input type="text" id="wpdemo_user_autocomplete" placeholder="Введите имя пользователя..." autocomplete="off" />Подключаем JS с локализацией:
function wpdemo_enqueue_scripts() {
wp_enqueue_script('wpdemo-autocomplete', get_template_directory_uri() . '/js/autocomplete.js', ['jquery'], null, true);
wp_localize_script('wpdemo-autocomplete', 'wpdemo_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpdemo-autocomplete-nonce')
]);
}
add_action('wp_enqueue_scripts', 'wpdemo_enqueue_scripts');2. JavaScript с обработкой ввода
В файле autocomplete.js пишем логику отправки AJAX-запросов и отображения результатов:
jQuery(document).ready(function($) {
var timeout = null;
$('#wpdemo_user_autocomplete').on('input', function() {
clearTimeout(timeout);
var query = $(this).val();
if(query.length < 2) {
$('#wpdemo-user-results').remove();
return;
}
timeout = setTimeout(function() {
$.ajax({
url: wpdemo_ajax_object.ajax_url,
type: 'POST',
dataType: 'json',
data: {
action: 'wpdemo_user_autocomplete',
nonce: wpdemo_ajax_object.nonce,
query: query
},
success: function(response) {
$('#wpdemo-user-results').remove();
if(response.success && response.data.length) {
var list = $('<ul id="wpdemo-user-results" style="border:1px solid #ccc; position:absolute; background:#fff; max-height:150px; overflow-y:auto; z-index:9999; width: 300px;"></ul>');
$.each(response.data, function(i, user) {
var item = $('<li style="padding:5px; cursor:pointer;"></li>').text(user.display_name);
item.on('click', function() {
$('#wpdemo_user_autocomplete').val(user.display_name);
$('#wpdemo-user-results').remove();
});
list.append(item);
});
$('#wpdemo_user_autocomplete').after(list);
}
}
});
}, 300);
});
// Закрывать список при клике вне
$(document).on('click', function(e) {
if(!$(e.target).closest('#wpdemo_user_autocomplete, #wpdemo-user-results').length) {
$('#wpdemo-user-results').remove();
}
});
});3. PHP обработчик AJAX-запроса
Добавляем функцию в functions.php или плагин для обработки запроса:
function wpdemo_user_autocomplete_callback() {
check_ajax_referer('wpdemo-autocomplete-nonce', 'nonce');
$query = isset($_POST['query']) ? sanitize_text_field(wp_unslash($_POST['query'])) : '';
if(empty($query)) {
wp_send_json_success([]);
}
$args = [
'search' => '*' . esc_attr($query) . '*',
'search_columns' => ['user_login', 'user_nicename', 'display_name'],
'number' => 10,
'fields' => ['ID', 'display_name'],
];
$user_query = new WP_User_Query($args);
$users = [];
if(!empty($user_query->results)) {
foreach($user_query->results as $user) {
$users[] = [
'ID' => $user->ID,
'display_name' => $user->display_name
];
}
}
wp_send_json_success($users);
}
add_action('wp_ajax_wpdemo_user_autocomplete', 'wpdemo_user_autocomplete_callback');
add_action('wp_ajax_nopriv_wpdemo_user_autocomplete', 'wpdemo_user_autocomplete_callback');Как расширить и адаптировать автозаполнение под другие задачи
Использование кастомных типов записей и метаполей
Подобный подход легко использовать для автозаполнения товаров, городов, категорий и любых других данных. Для этого в PHP-обработчике меняем запрос на WP_Query с нужным типом записи и метаполями.
Например, для автозаполнения по кастомному типу product:
$args = [
'post_type' => 'product',
's' => $query,
'posts_per_page' => 10,
'fields' => 'ids'
];
$query_obj = new WP_Query($args);
// Формируем массив с названиями постов для ответа
Оптимизация производительности
Для сайтов с большим количеством данных стоит использовать индексацию и кеширование результатов автозаполнения. Можно подключить плагин Clearfy Pro для оптимизации базы данных и кеширования или использовать транзиенты WordPress для кеширования результатов запросов.
Также важно минимизировать число запросов. В JS реализован дебаунс (задержка 300 мс), чтобы запросы не отправлялись при каждом вводе символа.
Поддержка мульти-язычности
Если ваш сайт многоязычный, нужно учитывать текущий язык при поиске. Например, добавлять параметр языка в AJAX-запрос и фильтровать записи по языку на сервере.
Советы по безопасности и удобству
Обязательно проверяйте nonce в AJAX запросах, чтобы защитить сайт от CSRF-атак. Все вводимые данные нужно санитизировать.
Для удобства пользователей сделайте список автозаполнения навигабельным с клавиатуры — это можно реализовать через дополнительный JS-код.
Также стоит предусмотреть сообщение, если данные не найдены, чтобы пользователь понимал, что запрос обработан.
Использование плагинов для автозаполнения в WordPress
Если не хотите писать код, можно использовать готовые решения, например:
- My Popup — с возможностью создания форм с автозаполнением;
- WPRemark — для работы с комментариями и формами;
- Плагины типа SearchWP или Relevanssi для расширенного поиска и автозаполнения.
Однако, собственная реализация даёт больше гибкости и не нагружает сайт лишним функционалом.