Animation10 min
Type-Along Trie
Autocomplete and wildcard search animated.
This animation puts a search box on top of a live trie. As you type "ca", a cursor walks the tree edge by edge — c, then a — lighting up the path, and every word in the subtree below the cursor glows as a live dropdown suggestion, exactly how autocomplete works. Word-ending nodes wear a gold ring; plain prefix nodes don't.
Then two more moves:
- Insert a new word and watch it reuse the deepest shared prefix — existing nodes pulse as the walk passes through them, and fresh nodes bud off only where the word diverges. Shared beginnings are stored once; that's the whole memory story.
- Wildcard search with a dot: at the
.the single cursor splits into ghost copies, one per child, each continuing independently. That split is the DFS branching a wildcard forces — a literal character follows one edge, a dot tries them all.
What to watch for: the walk's cost tracks the typed prefix's length, never the dictionary's size — the suggestion list appears after two steps whether the trie holds ten words or ten thousand. And keep an eye on the gold rings: a search only succeeds when the cursor lands on one, not merely on an existing node.