Typeahead
Explore how to build a responsive typeahead system using RxJS by manipulating observable streams with operators such as map, filter, tap, and mergeMap. Understand handling user input events safely, filtering results, and avoiding common bugs in asynchronous UI interactions.
Now that a Pig Latin translator is under your belt, let’s tackle a different problem: typeahead.
Typeahead tool
A typeahead system is one where, as the user types, the UI suggests possible options.
In other words, the UI types ahead of the user. In the screenshot, typeahead helps to select a U.S. state. The user entered ar and the UI suggests all states that might fit ar, in alphabetical order.
Race condition and typeaheads
There has been much gnashing of teeth and pulling of hair over typeaheads. Before observables, collecting the stream of keypress events and parsing out possible results was difficult to pull off and filled with race conditions.
Don’t just take my word for it; ...