demo · v135

Search-as-you-type with takeUntil

The canonical Observable use case from the WICG explainer: a search box that fires off an in-flight request on each keystroke, and uses takeUntil to cancel any earlier in-flight subscriber the moment a newer one arrives. Promises can't model this without bolt-on AbortControllers — Observables make it the default shape.

Observable: ?

resolved results (latest query only)

subscriber lifecycle log

the code

// Each keystroke fires a request; the next keystroke abandons the previous one.
input.when("input")
  .map((e) => e.target.value.trim())
  .filter((q) => q.length > 0)
  .switchMap((q) => Observable.from(searchAPI(q)))   // cancels prior in-flight
  .subscribe({
    next: render,
    error: showError,
  });

see also