Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Tue Nov 21 2017

This post allows you to visualize how autocomplete data would be arranged within a Prefix Trie data structure. If you would like an introduction to Trie data structures before continuing, please check out Julia’s article on Medium.

Using the visualization

  • The words can be changed on the fly; this will adjust the Trie diagram
  • Sentences may be used instead of words
  • The letters constituting each of the words are represented in the tree as nodes
  • The end of each full word is marked on the node with the text “endWord”
  • Clicking on any of the nodes will trace down from that node. You will be shown the words and have an option to download them.

    • This is the basis; we will expand on when we implement our autocomplete static file generator

Source code

I created this visualization with the React framework, to the availability of ReactD3 and ReactD3 Tree.

Edit on CodeSandbox Edit on GitHub

Paul Ness

Paul S. Ness Software engineer with ten years of experience in a variety of industries such travel, payments, medical, fine art and publishing.