В этом задании мы создадим поисковую строку с автокомплитом и debounce для оптимизации производительности.
Автокомплит - это подсказки при вводе, которые помогают пользователю быстрее найти нужное. Как поиск Google - вы начинаете вводить, и система предлагает варианты.
Debounce - это задержка перед выполнением действия. Представьте, что пользователь вводит слово "Москва". Без debounce поиск выполнился бы 6 раз - после каждой буквы (М, Мо, Мос, Моск, Москв, Москва). С debounce мы ждём, пока пользователь перестанет печатать, и только тогда ищем.
Для debounce в useEffect используется с cleanup функцией:
setTimeout
useEffect(()=>{const timer =setTimeout(()=>{// Выполняем поиск через 300мс после остановки вводаperformSearch(query);},300);// Если пользователь продолжает печатать, старый таймер отменяетсяreturn()=>clearTimeout(timer);},[query]);
Каждый раз при изменении query предыдущий таймер очищается, и создаётся новый. Поиск выполнится только если 300мс прошло без изменений.
Фильтрация с несколькими полями - проверяем вхождение в разные поля:
Ограничение количества подсказок - используем slice:
const suggestions = filtered.slice(0,5);// Первые 5 результатов
Задание
Необходимо создать поиск стран с автокомплитом и debounce. Создайте состояния: searchQuery (текст поиска), suggestions (массив подсказок), showSuggestions (показывать ли выпадающий список), filteredCountries (все найденные страны), isSearching (индикатор загрузки). В useEffect с зависимостью [searchQuery] реализуйте debounce: если запрос пустой, очистите все состояния. Установите isSearching в true. Создайте setTimeout с задержкой 300мс, внутри которого отфильтруйте COUNTRIES по совпадению searchQuery с названием страны или столицы (без учёта регистра), установите suggestions как первые 5 результатов, filteredCountries как все результаты, isSearching в false. Верните cleanup функцию с clearTimeout. В handleInputChange обновите searchQuery и установите showSuggestions в true. В handleSuggestionClick установите searchQuery в выбранное значение и скройте подсказки. Отобразите список подсказок когда showSuggestions === true. Покажите индикатор загрузки (⏳) когда isSearching === true, иначе иконку поиска (🔍). Отобразите разные состояния: пустой поиск, ничего не найдено, список результатов.
