Как настроить автозаполнение форм в WordPress с помощью AJAX

Автозаполнение форм существенно улучшает пользовательский опыт на сайте, позволяя быстрее вводить данные и снижая количество ошибок. В WordPress можно реализовать такую функцию с помощью AJAX, что позволит динамически подгружать подсказки без перезагрузки страницы. В этой статье мы подробно разберём, как настроить автозаполнение форм в WordPress, используя AJAX и кастомный код, а также рассмотрим полезные плагины для ускорения разработки.

Зачем использовать автозаполнение форм в WordPress

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

Классический пример — поиск по сайту с подсказками или форма добавления записи с выбором существующих терминов.

Реализовать автозаполнение можно с помощью JavaScript и AJAX, чтобы отправлять запросы к серверу и получать результаты без перезагрузки страницы.

Настройка автозаполнения с помощью AJAX в WordPress

Подготовка формы и подключение скриптов

Для начала создадим простую HTML-форму с полем ввода, например, для выбора категории:

<form id="wpfix_autocomplete_form">
  <label for="category_input">Введите название категории:</label>
  <input type="text" id="category_input" name="category_input" autocomplete="off"/>
  <div id="suggestions" style="border:1px solid #ccc; display:none; max-height:150px; overflow-y:auto;"></div>
</form>

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

function wpfix_enqueue_autocomplete_scripts() {
  wp_enqueue_script('wpfix-autocomplete', get_template_directory_uri() . '/js/wpfix-autocomplete.js', array('jquery'), '1.0', true);
  wp_localize_script('wpfix-autocomplete', 'wpfix_ajax_obj', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpfix_autocomplete_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'wpfix_enqueue_autocomplete_scripts');

В этом примере мы подключаем файл wpfix-autocomplete.js и передаём в него адрес AJAX и nonce для безопасности.

JavaScript для отправки AJAX-запросов

Создайте файл wpfix-autocomplete.js в папке js вашей темы с таким содержанием:

jQuery(document).ready(function($) {
  var timer;
  $('#category_input').on('input', function() {
    var query = $(this).val();
    clearTimeout(timer);
    if (query.length < 2) {
      $('#suggestions').hide();
      return;
    }
    timer = setTimeout(function() {
      $.ajax({
        url: wpfix_ajax_obj.ajax_url,
        method: 'POST',
        data: {
          action: 'wpfix_autocomplete_categories',
          nonce: wpfix_ajax_obj.nonce,
          query: query
        },
        success: function(response) {
          if (response.success) {
            var suggestions = response.data;
            var html = '';
            if(suggestions.length) {
              suggestions.forEach(function(item) {
                html += '<div class="suggestion-item" style="padding:5px; cursor:pointer;">' + item + '</div>';
              });
              $('#suggestions').html(html).show();
            } else {
              $('#suggestions').hide();
            }
          }
        }
      });
    }, 300);
  });

  // Обработка клика по подсказке
  $('#suggestions').on('click', '.suggestion-item', function() {
    $('#category_input').val($(this).text());
    $('#suggestions').hide();
  });

  // Скрываем подсказки при клике вне поля
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#category_input, #suggestions').length) {
      $('#suggestions').hide();
    }
  });
});

В этом скрипте мы при вводе текста ждём 300 мс паузы, затем отправляем AJAX-запрос с введённым запросом на сервер. Если есть результаты — показываем их в блоке подсказок. При клике по подсказке значение поля заменяется выбранным.

Обработка AJAX-запроса в PHP

Теперь добавим обработчик запроса в functions.php или плагин:

function wpfix_ajax_autocomplete_categories() {
  check_ajax_referer('wpfix_autocomplete_nonce', 'nonce');

  $query = isset($_POST['query']) ? sanitize_text_field(wp_unslash($_POST['query'])) : '';
  if (empty($query)) {
    wp_send_json_success(array());
  }

  $args = array(
    'taxonomy' => 'category',
    'hide_empty' => false,
    'name__like' => $query,
    'number' => 10
  );

  $terms = get_terms($args);
  $results = array();
  if (!is_wp_error($terms) && !empty($terms)) {
    foreach ($terms as $term) {
      $results[] = $term->name;
    }
  }

  wp_send_json_success($results);
}
add_action('wp_ajax_wpfix_autocomplete_categories', 'wpfix_ajax_autocomplete_categories');
add_action('wp_ajax_nopriv_wpfix_autocomplete_categories', 'wpfix_ajax_autocomplete_categories');

Здесь мы проверяем nonce, получаем параметр query, ищем категории с похожими именами и возвращаем их в JSON.

Использование готовых плагинов для автозаполнения форм

Если не хотите писать код, можно использовать готовые плагины. Вот несколько популярных:

Autocomplete WooCommerce Products Search — автозаполнение для поиска товаров в WooCommerce.
Contact Form 7 – Autocomplete — добавляет автозаполнение в формы Contact Form 7.
SearchWP Live Ajax Search — расширенный AJAX-поиск с подсказками.

Для более универсальных форм с автозаполнением можно использовать плагин My Popup от WPSHOP, который поддерживает AJAX и различные варианты кастомизации.

Практические советы и рекомендации

Оптимизация производительности

При большом количестве данных важно ограничивать количество возвращаемых результатов и использовать дебаунсинг (паузы перед отправкой запросов), чтобы снизить нагрузку на сервер.

Также стоит кэшировать результаты запросов, если данные меняются нечасто — например, с помощью Transients API.

Безопасность

Обязательно используйте nonce для проверки легитимности запросов AJAX.

Санитизируйте все данные, получаемые от пользователя, чтобы избежать XSS и SQL-инъекций.

UX и дизайн подсказок

Подсказки должны быть удобными для клика и хорошо видны на разных устройствах.

Добавляйте навигацию с клавиатуры (стрелки вверх/вниз, Enter для выбора) — это улучшит доступность.

Заключение

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

Если хотите быстро добавить автозаполнение в формы с возможностью тонкой настройки, обратите внимание на плагин My Popup от WPSHOP, который поддерживает AJAX-запросы и кастомные шаблоны вывода подсказок.