Main/WordPress Fullstack/Blueprints/Custom Themes/Real-Time Live Search with Autocomplete & Debounce
Back to «Custom Themes» cards
Custom Themes(ТЗ 23 из 54)
Spec: Real-Time Live Search with Autocomplete & Debounce
Custom Themes5 шагов • +25 XP

Spec: Real-Time Live Search with Autocomplete & Debounce

High-performance instant search: custom WP REST API search endpoint, optimized WP_Query, accessible modal overlay with ARIA live regions, client-side debounce with AbortController, and keyboard navigation.

~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)

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

Users complain about slow search requiring full page reloads. We need a lightning-fast fullscreen search overlay that shows instant results with thumbnails, category tags, and prices as you type, with keyboard navigation.
Ключевые требования:
  • •Custom WP REST API endpoint /theme/v1/search returning sanitized post objects with thumbnails
  • •Optimized WP_Query limiting returned fields (ID, title, permalink, thumbnail, excerpt, post_type)
  • •Full-screen search modal with accessible ARIA combobox and live result announcements
  • •Client-side JavaScript featuring 300ms debounce and AbortController to cancel stale in-flight requests
  • •Full keyboard navigation: ArrowUp/ArrowDown selection, Enter to visit, Escape to close
Ограничения проекта:
  • •Search query execution time < 100ms on database with 10,000+ posts
  • •Zero third-party search plugins (no Ajax Search Pro or Relevanssi bloat)
  • •Respect post status ('publish') and password protection
Критерии приёмки (KPI):
  • Search UI displays results within 200ms of user stopping typing
  • Zero memory leaks from pending asynchronous requests
  • Lighthouse Accessibility score = 100 for search overlay

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

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

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

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

1
Этап 1 из 5

Step 1: Registering REST API search endpoint

~35 минЛегкий

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

Register /theme/v1/search route via register_rest_route on rest_api_init. Define query parameter 'term' with sanitize_callback and validate minimum length (>= 2 characters).

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

Set permission_callback => '__return_true' for public search, but implement rate limiting if exposed to high traffic.

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

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

Step 2: High-performance WP_Query execution

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

Step 3: Accessible search modal markup & ARIA

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

Step 4: Client JavaScript: Debounce & AbortController

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

Step 5: Keyboard navigation & empty state UX

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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