Principal/WordPress Fullstack/Blueprints/Temas personalizados/Búsqueda en tiempo real (Live Search) con autocompletado y debounce
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 23 из 54)
Especificación: Búsqueda en tiempo real (Live Search) con autocompletado y debounce
Temas personalizados5 шагов • +25 XP

Especificación: Búsqueda en tiempo real (Live Search) con autocompletado y debounce

Búsqueda instantánea de alto rendimiento: endpoint personalizado en WP REST API, consulta optimizada con WP_Query, capa modal accesible con ARIA live regions, debounce en cliente con AbortController y navegación por teclado.

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

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

Los usuarios se quejan de la lentitud de la búsqueda tradicional y las constantes recargas de página. Necesitamos una capa de búsqueda a pantalla completa que muestre resultados instantáneos con miniaturas, categorías y precios al escribir.
Ключевые требования:
  • •Endpoint personalizado en WP REST API /theme/v1/search con datos saneados e imágenes destacadas
  • •Consulta WP_Query optimizada limitando campos devueltos (ID, título, enlace, miniatura, extracto)
  • •Modal de búsqueda a pantalla completa con combobox ARIA y avisos en vivo para lectores de pantalla
  • •JavaScript en el cliente con debounce de 300ms y AbortController para cancelar peticiones pendientes obsoletas
  • •Navegación completa por teclado: selección con flechas arriba/abajo, Enter para abrir y Escape para cerrar
Ограничения проекта:
  • •Tiempo de ejecución de la consulta SQL < 100ms en bases de datos con más de 10 000 entradas
  • •Sin plugins pesados de búsqueda (sin Ajax Search Pro ni Relevanssi)
  • •Respeto estricto del estado de publicación ('publish') y entradas protegidas por contraseña
Критерии приёмки (KPI):
  • Resultados visibles en menos de 200ms tras pausar la escritura
  • Cero fugas de memoria por peticiones asíncronas no canceladas
  • Puntuación de 100 en Lighthouse Accessibility para el formulario de búsqueda

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

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

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

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

1
Этап 1 из 5

Paso 1: Registro del endpoint de búsqueda en la REST API

~35 минЛегкий

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

Registre la ruta /theme/v1/search mediante register_rest_route en rest_api_init. Defina el parámetro 'term' con saneamiento y validación de longitud mínima (>= 2 caracteres).

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

Establezca permission_callback => '__return_true' para búsquedas públicas y añada control de frecuencia (rate limit) si el tráfico es elevado.

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

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

Paso 2: Ejecución de WP_Query de alto rendimiento

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

Paso 3: Maquetación del modal de búsqueda y atributos ARIA

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

Paso 4: JavaScript en el cliente: Debounce y AbortController

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

Paso 5: Navegación por teclado y gestión de estados vacíos

~25 минЛегкий

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

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

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

Интеграция

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

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

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

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