Автозаполнение полей форм значительно улучшает пользовательский опыт на сайте, сокращая время ввода и снижая количество ошибок. В этой статье мы подробно разберем, как создать автозаполняемое поле в формах WordPress с использованием JavaScript и PHP, а также рассмотрим примеры реализации с популярными плагинами и собственным кодом.
Что такое автозаполняемое поле и зачем оно нужно в WordPress
Автозаполняемое поле — это элемент формы, который предлагает пользователю варианты ввода на основе уже введенных данных или заранее заданного списка. Это особенно полезно для поиска, выбора городов, категорий, тегов и других элементов, где множество вариантов.
В WordPress автозаполнение часто требуется в формах обратной связи, фильтрах товаров, поиске по сайту и других интерактивных модулях. Благодаря автозаполнению пользователь быстрее находит нужный вариант, что повышает конверсию и удобство использования.
Реализация автозаполнения может быть выполнена как с помощью готовых плагинов, так и самостоятельно, используя AJAX-запросы и JavaScript.
Использование плагинов для автозаполнения в WordPress
Для быстрой реализации автозаполняемых полей можно использовать специальные плагины. Рассмотрим несколько полезных вариантов.
1. WPAutocomplete
Простой плагин, который добавляет автозаполнение к текстовым полям на сайте. Вы можете настроить источники данных — посты, термины, произвольные поля.
Плюсы: легко настраивается, поддерживает AJAX.
Минусы: ограниченная кастомизация, подходит для простых задач.
2. Contact Form 7 Autocomplete
Расширение для популярного Contact Form 7, добавляющее возможность автозаполнения в поля форм. Автоматически подгружает варианты из базы или сторонних API.
3. Select2 или Chosen с интеграцией в формы
Хотя это не плагины WordPress, а JavaScript-библиотеки, их можно легко интегрировать в формы WordPress для удобного поиска и выбора из большого списка.
Для интеграции достаточно подключить скрипты и стили и инициализировать поля с помощью JS.
Как создать собственное автозаполняемое поле в WordPress: пошаговое руководство
Если вы хотите гибко управлять автозаполнением и не использовать готовые плагины, можно написать собственное решение на PHP и JavaScript с использованием AJAX-запросов WordPress.
Шаг 1. Добавление поля в форму
Добавим текстовое поле в нужное место темы или плагина, например в файле шаблона:
<input type="text" id="wpassist_autocomplete" name="wpassist_autocomplete" autocomplete="off" placeholder="Начните вводить..." />
<div id="wpassist_autocomplete_results" style="border:1px solid #ccc; display:none; max-height:150px; overflow-y:auto; position:absolute; background:#fff; z-index:999;"></div>Шаг 2. Подключение JavaScript для обработки ввода
Добавим скрипт, который будет отправлять AJAX-запросы при вводе текста и отображать результаты:
jQuery(document).ready(function($) {
$('#wpassist_autocomplete').on('input', function() {
var query = $(this).val();
if(query.length < 2) {
$('#wpassist_autocomplete_results').hide();
return;
}
$.ajax({
url: wpassist_ajax.ajax_url,
method: 'POST',
data: {
action: 'wpassist_autocomplete_search',
nonce: wpassist_ajax.nonce,
q: query
},
success: function(response) {
if(response.success) {
var results = response.data;
var html = '';
if(results.length) {
results.forEach(function(item) {
html += '<div class="wpassist-autocomplete-item" style="padding:5px; cursor:pointer;">' + item + '</div>';
});
$('#wpassist_autocomplete_results').html(html).show();
} else {
$('#wpassist_autocomplete_results').hide();
}
}
}
});
});
$(document).on('click', '.wpassist-autocomplete-item', function() {
$('#wpassist_autocomplete').val($(this).text());
$('#wpassist_autocomplete_results').hide();
});
$(document).click(function(e) {
if(!$(e.target).closest('#wpassist_autocomplete_results, #wpassist_autocomplete').length) {
$('#wpassist_autocomplete_results').hide();
}
});
});Шаг 3. Обработка AJAX-запроса в functions.php
Теперь добавим обработчик AJAX-запроса, который будет искать подходящие варианты, например, среди заголовков постов:
add_action('wp_ajax_wpassist_autocomplete_search', 'wpassist_autocomplete_search');
add_action('wp_ajax_nopriv_wpassist_autocomplete_search', 'wpassist_autocomplete_search');
function wpassist_autocomplete_search() {
check_ajax_referer('wpassist_nonce', 'nonce');
$query = isset($_POST['q']) ? sanitize_text_field($_POST['q']) : '';
if(empty($query)) {
wp_send_json_success([]);
}
$args = [
's' => $query,
'posts_per_page' => 10,
'post_status' => 'publish'
];
$search_query = new WP_Query($args);
$results = [];
if($search_query->have_posts()) {
while($search_query->have_posts()) {
$search_query->the_post();
$results[] = get_the_title();
}
}
wp_reset_postdata();
wp_send_json_success($results);
}Шаг 4. Локализация скрипта и передача AJAX URL
Чтобы скрипт знал URL для AJAX и nonce, нужно добавить в functions.php:
function wpassist_enqueue_scripts() {
wp_enqueue_script('wpassist-autocomplete', get_template_directory_uri() . '/js/wpassist-autocomplete.js', ['jquery'], null, true);
wp_localize_script('wpassist-autocomplete', 'wpassist_ajax', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpassist_nonce'),
]);
}
add_action('wp_enqueue_scripts', 'wpassist_enqueue_scripts');Дополнительные советы и улучшения для автозаполнения в WordPress
Рассмотрим, как можно улучшить и расширить функциональность автозаполняемых полей.
Кеширование результатов
Если данные не меняются часто, стоит кешировать результаты поиска, например, используя Transients API. Это снизит нагрузку на сервер и ускорит ответ.
Использование сторонних API
Для географических данных или популярных списков можно использовать внешние сервисы, например, Google Places API для автозаполнения адресов.
Интеграция с плагинами форм
Если вы используете плагин Contact Form 7, Gravity Forms или WPForms, можно расширить их функционал, добавив кастомный JavaScript с автозаполнением по AJAX. Для Gravity Forms есть специальные хуки для добавления кастомных полей.
Пример: интеграция автозаполнения с плагином Contact Form 7
Добавим автозаполнение в обычное текстовое поле Contact Form 7. Для этого в functions.php подключим AJAX-обработчик, а в форму добавим поле с нужным id:
[text* your-autocomplete id:wpassist_cf7_autocomplete]Далее подключим JavaScript аналогично предыдущему примеру, изменив селектор на #wpassist_cf7_autocomplete. AJAX-обработчик в PHP будет таким же, только можно добавить фильтрацию по нужным типам постов или метаданным.
Заключение
Создание автозаполняемых полей в WordPress — задача вполне выполнимая как с помощью готовых плагинов, так и собственными силами. Использование AJAX позволяет динамически подгружать данные, улучшая UX и снижая нагрузку. В статье представлен подробный пример реализации с кодом, который можно адаптировать под свои задачи.
Для удобства и расширенных возможностей рекомендуем изучить плагины WPRemark (для модерации и управления формами) и тему Root с удобной интеграцией форм.