Hands-On Data Structures and Algorithms with JavaScript

Creating a typeahead lookup

Imagine this, you have a form for user signup, and your users have to fill out their information, including their country. Lucky for us, there are only a fixed number of countries, so the user experience around populating and selecting can be made extremely fun and easy rather than having them scroll through hundreds of options.

In this example, we will be creating a trie tree and prepopulating it with a list of all the countries. The users can then type the name of their country and our component will work as a typeahead and show the available options to the user.

Let's now discuss why we need a trie tree. According to Wikipedia, the following is the definition of a simple trie tree:

In computer science, a trie, ...