Розробка поіску з автодоповненням в мобільному додатку
Поіск з автодоповненням — компонент, який користувач замічає тільки коли він працює погано: підсказки з'являються з затримкою, не відфільтровані по релевантності, екранна клавіатура перекриває результати, або при швидкому вводі прилітає відповідь на попередній запрос замість актуального. Реалізувати правильно з першого разу складніше, ніж здається.
Ключові технічні завдання
Дебаунс та скасування запросів. Кожне натиснення клавіші не повинно йти на сервер. Стандартна схема: debounce 250–350 мс + скасування попереднього запроса при новому вводі. У React Native — useRef для зберігання таймера + AbortController для fetch, або cancelToken в axios. На Flutter — StreamTransformer.fromHandlers + switchMap у Dart streams, або через Debouncer з Timer.cancel(). На Android з coroutines — flow.debounce(300) + flatMapLatest гарантують, що в полеті завжди тільки один запрос.
Race conditions. Користувач набирає «нике», отримує запрос для «нике», потім стирає до «ні» та знову додає «ке». Якщо сервер відповів на запрос «ні» пізніше, ніж на «нике», інтерфейс покаже нерелевантні підсказки. Рішення: присвоювати кожному запросу унікальний id та ігнорувати відповіді з застарілим id.
Клавіатура та layout. На iOS KeyboardAvoidingView з behavior="padding" працює коректно тільки якщо правильно виставлена keyboardVerticalOffset. На Android — android:windowSoftInputMode="adjustResize" у маніфесті, інакше список підсказок уйде під клавіатуру. На Flutter — Scaffold автоматично обробляє resizeToAvoidBottomInset, але якщо SearchBar у кастомному overlay — потрібно слухати MediaQuery.of(context).viewInsets.bottom вручну.
Архітектура компонента
Поисковий екран складається з трьох станів: порожній ввід (показуємо історію поіску або популярні запити), ідёт завантаження (skeleton або індикатор), результати отримані (список підсказок або «нічого не знайдено»).
Історія поіску — в AsyncStorage (RN) або SharedPreferences (Android) / UserDefaults (iOS). Максимум 10–15 останніх запросів, дедуплицируємо по тексту, показуємо з іконкою годин.
Для підсвітлення збігів у тексті підсказки використовуємо split по введеній строці + <Text> з різним стилем на збіг. Не regexp replace — він ломається на спецсимволах у запиті.
Кейс з практики: маркетплейс, React Native, поіск по 200 000 товарів. Скарги: «підсказки застарілі». Аналіз показав — відповіді приходили з різними затримками (CDN кешував популярні запити швидко, рідкі — повільно), та без скасування застарілих запросів у інтерфейсі мигали випадкові результати. Додали AbortController + requestId tracking — проблема ушла повністю.
Локальний поіск
Для маленьких датасетів (< 5000 записів) поіск можна робити клієнтськи. На Flutter — пакет fuse_dart (fuzzy search). У RN — fuse.js. На Android — Room FTS4 для SQLite full-text search. Це прибирає мережеві затримки та працює offline.
Що входить у роботу
- SearchBar з анімацією фокуса та кнопкою очистки
- Список автодоповнення з підсвіткою збігу
- Історія поіску з можливістю видалення
- Дебаунс + скасування застарілих запросів
- Обробка станів: завантаження, порожній результат, помилка
- Клавіатурний тип (
search,doneaction на кнопці) - Опційно: voice search через SpeechRecognizer (Android) / SFSpeechRecognizer (iOS)
Строки
2–3 робочих дні — базова реалізація з API-автодоповненням, історією та обробкою edge cases. Вартість розраховується індивідуально.