Как создать автозаполняемое поле в WordPress: пошаговое руководство с примерами кода

Автор: Дарья Волкова | Опубликовано: 26.11.2025

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

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

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

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

Технически, автозаполняемое поле — это input с привязкой к серверной части, которая возвращает массив подходящих вариантов по введённой строке.

Пример плагинов для автозаполнения в WordPress

Перед тем как писать свой код, полезно взглянуть на готовые решения:

SearchWP Live Ajax Search — расширяет стандартный поиск WordPress с живыми подсказками;
ACF: Autocomplete Field — расширение для популярного плагина Advanced Custom Fields, добавляющее автозаполнение;
WP User Frontend — поддерживает автозаполнение для полей с пользователями;
FacetWP — мощный инструмент для фильтрации с подсказками и автозаполнением.

Но если нужен кастомный функционал или лучшее понимание процесса, стоит написать собственное решение.

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

Подготовка HTML и JavaScript

Начнём с простого HTML-поля с id wpcodes-autocomplete. К нему привяжем обработчик событий, который будет отправлять AJAX-запрос на сервер при вводе текста.

<input type="text" id="wpcodes-autocomplete" placeholder="Начните вводить..." autocomplete="off"/>
<div id="wpcodes-suggestions" style="border:1px solid #ccc; max-width:300px; display:none; position:absolute; background:#fff; z-index:9999;"></div>

JavaScript, использующий jQuery (для простоты):

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

  // При клике на вариант подставляем его в поле
  $(document).on('click', '.wpcodes-suggestion-item', function() {
    $('#wpcodes-autocomplete').val($(this).text());
    $('#wpcodes-suggestions').hide();
  });

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

Регистрация скриптов и локализация AJAX URL в functions.php

Для работы AJAX нужно подключить скрипт и передать в него URL обработчика и nonce для безопасности.

function wpcodes_enqueue_scripts() {
  wp_enqueue_script('wpcodes-autocomplete-js', get_template_directory_uri() . '/js/wpcodes-autocomplete.js', array('jquery'), '1.0', true);
  wp_localize_script('wpcodes-autocomplete-js', 'wpcodes_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpcodes_autocomplete_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'wpcodes_enqueue_scripts');

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

Создадим функцию-обработчик, которая будет принимать поисковый термин, искать совпадения и возвращать результат.

function wpcodes_autocomplete_search_callback() {
  check_ajax_referer('wpcodes_autocomplete_nonce', 'nonce');

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

  global $wpdb;
  // Пример: поиск по названиям постов типа 'post'
  $like = '%' . $wpdb->esc_like($term) . '%';
  $results = $wpdb->get_col($wpdb->prepare(
    "SELECT post_title FROM {$wpdb->posts} WHERE post_type = 'post' AND post_status = 'publish' AND post_title LIKE %s ORDER BY post_title LIMIT 10",
    $like
  ));

  wp_send_json_success($results);
}
add_action('wp_ajax_wpcodes_autocomplete_search', 'wpcodes_autocomplete_search_callback');
add_action('wp_ajax_nopriv_wpcodes_autocomplete_search', 'wpcodes_autocomplete_search_callback');

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

Вместо admin-ajax.php можно использовать REST API, что более современно и удобно для фронтенд-разработки.

Создадим собственный endpoint, который будет принимать параметр term и возвращать список результатов.

function wpcodes_register_autocomplete_route() {
  register_rest_route('wpcodes/v1', '/autocomplete', array(
    'methods' => 'GET',
    'callback' => 'wpcodes_rest_autocomplete_callback',
    'permission_callback' => '__return_true',
  ));
}
add_action('rest_api_init', 'wpcodes_register_autocomplete_route');

function wpcodes_rest_autocomplete_callback(WP_REST_Request $request) {
  $term = sanitize_text_field($request->get_param('term'));
  if(empty($term)) {
    return new WP_REST_Response(array(), 200);
  }

  global $wpdb;
  $like = '%' . $wpdb->esc_like($term) . '%';
  $results = $wpdb->get_col($wpdb->prepare(
    "SELECT post_title FROM {$wpdb->posts} WHERE post_type = 'post' AND post_status = 'publish' AND post_title LIKE %s ORDER BY post_title LIMIT 10",
    $like
  ));

  return new WP_REST_Response($results, 200);
}

Далее на стороне JavaScript меняем URL запроса на /wp-json/wpcodes/v1/autocomplete?term=... и используем fetch или axios.

Заключение

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

Как создать автозаполняемое поле в WordPress