BACK
Use casesTypeahead — поиск с подсказками
Use cases · 01

Typeahead — поиск с подсказками

Паттерн

Typeahead — это поле поиска, которое отправляет запрос на сервер по мере ввода пользователя. Без RxJS такой UI быстро превращается в гонку: пользователь набрал 7 букв, сервер вернул ответы на 7 разных запросов в произвольном порядке, и в выпадашке мигают чужие результаты.

Что решаем

  • Дребезг ввода. Пока пользователь печатает быстро, не дёргаем сервер на каждую букву.
  • Повторы. Если значение не изменилось (вставка того же текста, бекспейс/возврат), запрос не нужен.
  • Гонка ответов. Когда пришёл новый запрос, старый должен быть отменён.

Операторы и их роли

  • debounceTime(300) — ждать паузы в наборе.
  • distinctUntilChanged() — игнорировать повторяющиеся подряд значения.
  • switchMap — для каждого нового запроса отписываемся от предыдущего, тем самым отменяя его.

Что достигаем

Один HTTP-запрос на стабильное значение, всегда актуальный ответ в UI, и никакой ручной отмены подписок.

script.ts // TypeScript
CONSOLE · Console Output
Нажмите на запуск, чтобы увидеть результат...