Автозаполнение — это удобный функционал, который значительно улучшает пользовательский опыт на сайте. В WordPress мы можем реализовать автозаполняемое поле для различных форм, например, для поиска, регистрации или добавления контента. В этой статье разберем, как создать собственное автозаполняемое поле с помощью AJAX, jQuery и REST API WordPress.
Почему стоит использовать автозаполнение в WordPress
Автозаполняемые поля повышают удобство и скорость ввода информации. Пользователь получает подсказки в реальном времени, что помогает избежать ошибок и ускоряет процесс заполнения.
Кроме того, такой функционал снижает нагрузку на поддержку сайта, так как пользователи реже делают ошибки или задают одни и те же вопросы.
Для разработчика реализация автозаполнения — это хороший способ показать умение работать с AJAX, REST API и JavaScript внутри WordPress.
Основные шаги создания автозаполняемого поля в WordPress
Для реализации нам понадобится:
- Создать поле ввода в форме;
- Подключить jQuery UI Autocomplete или аналог;
- Написать AJAX-запрос к серверу при вводе текста;
- Обработать запрос на сервере — вернуть подходящие варианты;
- Вывести подсказки в интерфейсе.
Рассмотрим каждый шаг подробно с примерами.
1. Добавляем поле ввода в форму
В шаблоне WordPress добавьте обычный input с уникальным id:
<input type="text" id="wpexperts-autocomplete" name="search_item" placeholder="Введите название..." />Это поле мы будем превращать в автозаполняемое.
2. Подключаем jQuery UI Autocomplete
WordPress уже содержит jQuery, но для autocomplete нам понадобится jQuery UI. Добавим его через функцию enqueue в functions.php:
function wpexperts_enqueue_scripts() {
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');
wp_enqueue_script('wpexperts-autocomplete-script', get_template_directory_uri() . '/js/autocomplete.js', array('jquery','jquery-ui-autocomplete'), '1.0', true);
wp_localize_script('wpexperts-autocomplete-script', 'wpexperts_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpexperts_autocomplete_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpexperts_enqueue_scripts');В этом коде мы подключаем jQuery UI Autocomplete, стили и собственный скрипт autocomplete.js, который создадим ниже. Также передаем ajax_url и nonce для безопасности.
3. Создаем JavaScript для вызова автозаполнения
В файле js/autocomplete.js напишем следующий код:
jQuery(document).ready(function($) {
$('#wpexperts-autocomplete').autocomplete({
source: function(request, response) {
$.ajax({
url: wpexperts_ajax_object.ajax_url,
method: 'POST',
dataType: 'json',
data: {
action: 'wpexperts_autocomplete_search',
nonce: wpexperts_ajax_object.nonce,
term: request.term
},
success: function(data) {
response(data);
},
error: function() {
response([]);
}
});
},
minLength: 2
});
});Здесь при вводе минимум двух символов отправляется AJAX-запрос на сервер, который должен вернуть массив подходящих вариантов.
Обработка AJAX-запроса на сервере: поиск данных
Теперь создадим функцию в functions.php, которая будет обрабатывать запрос и возвращать результаты. В качестве примера будем искать по названиям записей постов типа "post".
function wpexperts_autocomplete_search_callback() {
check_ajax_referer('wpexperts_autocomplete_nonce', 'nonce');
$term = isset($_POST['term']) ? sanitize_text_field($_POST['term']) : '';
if (empty($term)) {
wp_send_json([]);
wp_die();
}
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
's' => $term,
'post_status' => 'publish'
);
$query = new WP_Query($args);
$results = array();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$results[] = get_the_title();
}
wp_reset_postdata();
}
wp_send_json($results);
wp_die();
}
add_action('wp_ajax_wpexperts_autocomplete_search', 'wpexperts_autocomplete_search_callback');
add_action('wp_ajax_nopriv_wpexperts_autocomplete_search', 'wpexperts_autocomplete_search_callback');Функция получает термин поиска, выполняет WP_Query для поиска постов с похожим названием и возвращает массив названий.
Расширяем функционал: автозаполнение с ID и выбор результата
Часто полезно не просто показывать текст, а передавать ID выбранного элемента. Для этого изменим функцию на сервере, чтобы возвращать массив с label и value:
$results[] = array(
'label' => get_the_title(),
'value' => get_the_ID()
);И на клиенте изменим обработчик выбора:
select: function(event, ui) {
$('#wpexperts-autocomplete').val(ui.item.label);
$('#hidden_post_id').val(ui.item.value); // скрытое поле для ID
return false;
}Для этого добавьте скрытое поле рядом с input:
<input type="hidden" id="hidden_post_id" name="post_id" />Примеры популярных плагинов для автозаполнения в WordPress
Если не хочется писать код, можно использовать готовые решения:
- Autocomplete WooCommerce: автозаполнение для поиска товаров;
- SearchWP Live Ajax Search: мощный AJAX поиск с автозаполнением;
- FacetWP: фильтры и автозаполнение для сложных каталогов;
- WP AutoComplete: простой плагин для любых полей.
Все эти плагины облегчают жизнь, но иногда лучше написать свой код для максимальной кастомизации.
Советы по оптимизации и безопасности
При работе с автозаполнением важно:
- Использовать nonce для защиты AJAX-запросов;
- Ограничивать количество результатов для снижения нагрузки;
- Кешировать часто запрашиваемые данные, например, с помощью Transients API;
- Проводить валидацию и санитизацию входящих данных;
- Обрабатывать ошибки корректно, чтобы не сломать интерфейс.
Эти меры позволят избежать проблем с безопасностью и производительностью.
Заключение
Создать автозаполняемое поле в WordPress можно достаточно просто, используя jQuery UI Autocomplete и AJAX. Такой функционал улучшает интерфейс сайта и повышает удобство пользователей. В статье подробно показано, как реализовать этот механизм с нуля и расширить его для передачи ID выбранного элемента. Рекомендуется также изучить готовые плагины для автозаполнения, чтобы выбрать оптимальный вариант под свои задачи.