Головна/WordPress Fullstack/Блупринти/Кастомні теми/Пошук по сайту в реальному часі (Live Search) з автодоповненням та дебаунсом
До карток розділу «Кастомні теми»
Кастомні теми(ТЗ 23 из 54)
ТЗ: Пошук по сайту в реальному часі (Live Search) з автодоповненням та дебаунсом
Кастомні теми5 шагов • +25 XP

ТЗ: Пошук по сайту в реальному часі (Live Search) з автодоповненням та дебаунсом

Швидкий повнотекстовий пошук: власний эндпоинт WP REST API, оптимізований вибір даних через WP_Query, доступний оверлей з ARIA-атрибутами, клієнтський дебаунс з AbortController та навігація клавіатурою.

~7 ч работыУровень: JuniorPHP 8.3/8.4WP REST APIWP_Query (s parameter)Vanilla JS Fetch APIAbortControllerDebounce patternARIA Live Regions
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~7 рабочих часов
Фриланс вилка~$315 – $525 (€280 – €490)
Оценка веб-студии~$665 – $1,120 (€630 – €1050)

ТЗ заказчика (исходный бриф):

Користувачі скаржаться на повільний пошук із перезавантаженням сторінки. Потрібен блискавичний пошуковий оверлей, який показує результати з мініатюрами, рубриками та цінами під час введення запиту.
Ключевые требования:
  • •Кастомний эндпоинт WP REST API /theme/v1/search, що повертає очищені дані постів із мініатюрами
  • •Оптимізований WP_Query з обмеженням полів (ID, заголовок, посилання, мініатюра, уривок)
  • •Повноекранний модальний оверлей із доступними атрибутами ARIA combobox та live-сповіщеннями
  • •Клієнтський JavaScript із дебаунсом 300мс та AbortController для скасування застарілих запитів
  • •Повне керування з клавіатури: вибір результатів стрілками, перехід за Enter, закриття за Escape
Ограничения проекта:
  • •Час виконання пошукового SQL-запиту < 100мс на базі понад 10 000 записів
  • •Без сторонніх плагінів (без важких Ajax Search Pro чи Relevanssi)
  • •Суворе врахування статусу записів ('publish') та захисту паролем
Критерии приёмки (KPI):
  • Поява результатів протягом 200мс після завершення введення символу
  • Нуль витоків пам'яті від незавершених асинхронних запитів
  • Оцінка доступності Lighthouse Accessibility = 100 для форми пошуку

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Крок 1: Реєстрація REST API эндпоинта /theme/v1/search

~35 минЛегкий

Практическое руководство:

Зареєструйте маршрут /theme/v1/search через register_rest_route на rest_api_init. Визначте параметр 'term' із санітизацією та валідацією мінімальної довжини (>= 2 символів).

План и контрольные точки реализации:
1Зарегистрировать роут /theme/v1/search
2Добавить валидацию минимальной длины term >= 3
3Санитизировать входящую строку через sanitize_text_field
Важные технические нюансы и подводные камни:

Встановіть permission_callback => '__return_true' для публічного пошуку та додайте захист від перевантаження.

Ожидаемый артефакт этапа:

REST API эндпоинт для поиска с валидацией входных данных.

PHP
<?php
// inc/live-search-endpoint.php
declare(strict_types=1);

add_action('rest_api_init', function (): void {
    register_rest_route('theme/v1', '/search', [
        'methods'             => WP_REST_Server::READABLE,
        'permission_callback' => '__return_true',
        'args'                => [
            'term' => [
                'required'          => true,
                'type'              => 'string',
                'sanitize_callback' => 'sanitize_text_field',
                'validate_callback' => fn($val) => mb_strlen(trim((string) $val)) >= 3,
            ],
        ],
        'callback'            => 'theme_handle_live_search',
    ]);
});
2
Этап 2 из 5

Крок 2: Високопродуктивний WP_Query з вибіркою даних

~35 минСредний
3
Этап 3 из 5

Крок 3: Верстка поля пошуку та контейнера результатів з ARIA

~30 минЛегкий
4
Этап 4 из 5

Крок 4: Клієнтський JavaScript: Debounce та AbortController

~40 минСредний
5
Этап 5 из 5

Крок 5: Клавіатурна навігація та тестування оверлею

~25 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами