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

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

Что такое автозаполняемая форма и зачем она нужна в WordPress

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

В WordPress подобные формы часто используются в поиске, фильтрации товаров, заполнении контактных форм и других интерактивных элементах.

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

Создание автозаполняемой формы с AJAX: пошаговое руководство

Шаг 1. Подготовка HTML-формы

Для начала создадим простую форму с одним полем ввода и блоком для отображения подсказок:

<form id="wptalk-autocomplete-form">
  <label for="wptalk_search">Поиск товара:</label>
  <input type="text" id="wptalk_search" name="wptalk_search" autocomplete="off" />
  <div id="wptalk-suggestions" class="suggestions"></div>
</form>

Ключевое — поле ввода и контейнер для подсказок. Обратите внимание, что у поля autocomplete="off" отключен браузерный автокомплит.

Шаг 2. Подключение AJAX-скрипта на фронтенде

Добавим JavaScript, который будет отслеживать ввод и отправлять AJAX-запросы на сервер:

function wptalk_enqueue_scripts() {
    wp_enqueue_script('wptalk-autocomplete', get_template_directory_uri() . '/js/wptalk-autocomplete.js', ['jquery'], null, true);
    wp_localize_script('wptalk-autocomplete', 'wptalk_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptalk_autocomplete_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wptalk_enqueue_scripts');

В этом коде мы подключаем скрипт wptalk-autocomplete.js и передаем в него параметры для AJAX-запроса.

Шаг 3. Реализация JS-логики для отправки запросов

Создадим файл wptalk-autocomplete.js с таким содержимым:

jQuery(document).ready(function($) {
  $('#wptalk_search').on('input', function() {
    var query = $(this).val();
    if(query.length < 2) {
      $('#wptalk-suggestions').empty();
      return;
    }
    $.ajax({
      url: wptalk_ajax_obj.ajax_url,
      method: 'POST',
      data: {
        action: 'wptalk_autocomplete',
        nonce: wptalk_ajax_obj.nonce,
        query: query
      },
      success: function(response) {
        if(response.success) {
          var suggestions = response.data;
          var html = '';
          suggestions.forEach(function(item) {
            html += '<div class="suggestion-item">' + item + '</div>';
          });
          $('#wptalk-suggestions').html(html);
        } else {
          $('#wptalk-suggestions').empty();
        }
      }
    });
  });

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

Этот скрипт отслеживает ввод, отправляет запрос с введенным текстом и выводит полученные подсказки в контейнер. Также реализована возможность выбора из списка.

Шаг 4. Создание обработчика AJAX-запроса в PHP

Добавим в functions.php или в плагин следующий код для обработки запроса:

function wptalk_handle_autocomplete() {
    check_ajax_referer('wptalk_autocomplete_nonce', 'nonce');
    $query = isset($_POST['query']) ? sanitize_text_field($_POST['query']) : '';

    if(empty($query)) {
        wp_send_json_error();
    }

    // Пример: поиск по названиям продуктов WooCommerce
    $args = [
        'post_type' => 'product',
        'posts_per_page' => 10,
        's' => $query,
        'fields' => 'ids'
    ];
    $search_query = new WP_Query($args);

    if(!$search_query->have_posts()) {
        wp_send_json_success([]);
    }

    $suggestions = [];
    foreach($search_query->posts as $post_id) {
        $suggestions[] = get_the_title($post_id);
    }

    wp_send_json_success($suggestions);
}
add_action('wp_ajax_wptalk_autocomplete', 'wptalk_handle_autocomplete');
add_action('wp_ajax_nopriv_wptalk_autocomplete', 'wptalk_handle_autocomplete');

Этот код принимает запрос, выполняет поиск по товарам WooCommerce и возвращает названия для подсказок.

Использование плагинов для автозаполнения в WordPress

Если хочется упростить процесс, можно воспользоваться готовыми решениями. Например:

• SearchWP Live Ajax Search — мощный плагин с поддержкой AJAX-поиска и автозаполнения.
• Ajax Search Lite — бесплатный плагин с настройками внешнего вида подсказок.
• WPGPT Search Autocomplete (плагин от WPSHOP) — интегрируется с современными алгоритмами поиска и может выдавать подсказки с помощью ИИ.

Подключение подобных плагинов также позволяет быстро внедрить автозаполнение без необходимости писать собственный код.

Советы по оптимизации автозаполняемых форм

Правильная обработка запросов

Не стоит отправлять запросы на каждый символ — рекомендуем использовать задержку (debounce) в JS, чтобы запрос отправлялся через 300-500 мс после последнего ввода. Это снизит нагрузку на сервер и улучшит производительность.

Кеширование результатов

Если данные поиска редко меняются, стоит кешировать результаты на стороне сервера или использовать transient API WordPress. Это уменьшит количество запросов к базе и ускорит отклик.

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

Обязательно используйте check_ajax_referer или аналогичные методы защиты от CSRF, а также тщательно фильтруйте и проверяйте входящие данные.

Пример debounce-функции для улучшения производительности в JS

function wptalk_debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Использовать с обработчиком ввода:

$('#wptalk_search').on('input', wptalk_debounce(function() {
  // AJAX-запрос
}, 400));

Вывод

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

Если хотите расширить функционал поиска с помощью ИИ, обратите внимание на плагин WPGPT от WPSHOP — он позволяет интегрировать интеллектуальный поиск с автодополнением и рекомендациями.