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

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

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

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

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

Основные шаги создания автозаполняемой формы в WordPress

1. Создание HTML-формы с полем для ввода.
2. Подключение скрипта JavaScript, который будет ловить ввод и отправлять AJAX-запрос.
3. Создание PHP-функции, обрабатывающей AJAX-запрос и возвращающей релевантные данные.
4. Вывод полученных данных в виде списка подсказок под полем ввода.

Далее рассмотрим каждый этап подробно и приведём примеры кода.

Создание HTML-формы с полем ввода

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

<form id="hueman-autocomplete-form" action="#" method="post">
  <label for="hueman-city">Город:</label>
  <input type="text" id="hueman-city" name="city" autocomplete="off" />
  <div id="hueman-suggestions" class="suggestions"></div>
</form>

Обратите внимание, что у поля отключён стандартный браузерный автокомплит с помощью autocomplete="off". Контейнер div#hueman-suggestions будет служить для вывода подсказок.

Подключение JavaScript для AJAX-запросов

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

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('hueman-city');
  const suggestions = document.getElementById('hueman-suggestions');
  
  let timer = null;
  input.addEventListener('input', function() {
    clearTimeout(timer);
    const query = this.value.trim();
    if(query.length < 2) { // минимальное количество символов для поиска
      suggestions.innerHTML = '';
      return;
    }
    timer = setTimeout(() => {
      fetch(hueman_ajax_object.ajax_url + '?action=hueman_autocomplete&query=' + encodeURIComponent(query))
        .then(response => response.json())
        .then(data => {
          suggestions.innerHTML = '';
          if(data.length) {
            const ul = document.createElement('ul');
            data.forEach(item => {
              const li = document.createElement('li');
              li.textContent = item;
              li.addEventListener('click', () => {
                input.value = item;
                suggestions.innerHTML = '';
              });
              ul.appendChild(li);
            });
            suggestions.appendChild(ul);
          }
        })
        .catch(console.error);
    }, 300); // задержка 300 мс для снижения количества запросов
  });
});

Здесь мы используем fetch для отправки GET-запроса к AJAX-обработчику WordPress. Обратите внимание, что hueman_ajax_object.ajax_url — это объект, который нужно локализовать в PHP, чтобы передать URL для AJAX.

PHP: создание обработчика AJAX-запроса в WordPress

Добавим в файл functions.php или в отдельный плагин следующий код для регистрации AJAX-обработчика:

add_action('wp_enqueue_scripts', 'hueman_enqueue_scripts');
function hueman_enqueue_scripts() {
  wp_enqueue_script('hueman-autocomplete-js', get_template_directory_uri() . '/js/hueman-autocomplete.js', array(), null, true);
  wp_localize_script('hueman-autocomplete-js', 'hueman_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php')
  ));
}

add_action('wp_ajax_hueman_autocomplete', 'hueman_handle_autocomplete');
add_action('wp_ajax_nopriv_hueman_autocomplete', 'hueman_handle_autocomplete');

function hueman_handle_autocomplete() {
  if (!isset($_GET['query'])) {
    wp_send_json([]);
  }
  $query = sanitize_text_field(wp_unslash($_GET['query']));

  // Пример: статический список городов
  $cities = array('Москва', 'Мурманск', 'Магадан', 'Минск', 'Могилёв', 'Мозырь', 'Мосул');

  $results = array_filter($cities, function($city) use ($query) {
    return mb_stripos($city, $query) !== false;
  });

  wp_send_json(array_values($results));
}

Объяснение:

• hueman_enqueue_scripts подключает JS и передаёт URL AJAX в переменную.
• hueman_handle_autocomplete получает параметр query, фильтрует список городов по подстроке и возвращает результаты в JSON.

Расширение: подключение данных из базы WordPress

Вместо статического массива городов можно динамически получить данные из базы. Например, если у вас есть кастомный тип записей «Города» или пользовательские мета, то используйте WP_Query:

function hueman_handle_autocomplete() {
  if (!isset($_GET['query'])) {
    wp_send_json([]);
  }
  $query = sanitize_text_field(wp_unslash($_GET['query']));

  $args = array(
    'post_type' => 'city',
    'posts_per_page' => 10,
    's' => $query
  );

  $wp_query = new WP_Query($args);
  $results = [];
  if ($wp_query->have_posts()) {
    while ($wp_query->have_posts()) {
      $wp_query->the_post();
      $results[] = get_the_title();
    }
    wp_reset_postdata();
  }
  wp_send_json($results);
}

Этот пример демонстрирует, как искать по заголовкам записей типа «city» и возвращать результаты для автозаполнения.

Советы по улучшению UX автозаполнения

• Добавьте клавиатурную навигацию — обработку стрелок вверх/вниз и клавиши Enter для выбора.
• Сделайте оформление подсказок с помощью CSS для лучшей видимости.
• Кэшируйте результаты на стороне клиента, чтобы не перегружать сервер.
• Минимизируйте количество запросов с помощью debounce (в нашем примере задержка 300 мс).

Заключение

Создание автозаполняемой формы в WordPress — это задача, которую можно решить с помощью простого AJAX и обработки запросов на PHP. Такой функционал улучшит удобство пользователей и сделает формы на вашем сайте более интерактивными. При необходимости вы можете интегрировать этот пример с любыми данными, будь то таксономии, мета-поля или внешние API.