Build Reactive Websites with RxJS

Typeahead

Now that a Pig Latin translator is under your belt, let’s tackle a different problem: typeahead. 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.

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 with race conditions. Don’t just take my word ...