Autocomplete System with Trie in DSA Typescript - Build from Scratch

Autocomplete System with Trie

📖 Scenario: You are building a simple autocomplete system like the ones used in search engines or messaging apps. When a user types some letters, the system suggests words that start with those letters.To do this efficiently, you will use a Trie data structure, which stores words in a tree-like form where each node represents a letter.

🎯 Goal: Create a Trie to store a list of words. Then, given a prefix, find all words in the Trie that start with that prefix.This project will help you understand how Tries work and how they can be used for autocomplete features.

📋 What You'll Learn

Create a TrieNode class with a children map and an endOfWord boolean

Create a Trie class with insert and searchPrefix methods

Insert given words into the Trie

Find all words starting with a given prefix using the Trie

Print the list of autocomplete suggestions

💡 Why This Matters

🌍 Real World

Autocomplete systems are used in search engines, messaging apps, and code editors to help users find words quickly by typing just a few letters.

💼 Career

Understanding Tries and autocomplete logic is useful for software engineers working on search features, user interfaces, and performance optimization.

1

Create TrieNode class

Create a class called TrieNode with a children property as a Map<string, TrieNode> and a endOfWord property set to false.

DSA Typescript

# Your code here

Hint

Think of TrieNode as a box holding links to next letters and a flag if a word ends here.

2

Create Trie class with insert method

Create a class called Trie with a root property initialized as a new TrieNode. Add an insert method that takes a word: string and inserts it into the Trie by creating nodes for each letter and marking the last node's endOfWord as true.

DSA Typescript

class TrieNode {
    children: Map;
    endOfWord: boolean;

    constructor() {
        this.children = new Map();
        this.endOfWord = false;
    }
}

// Create Trie class with root and insert method
// Your code here

Hint

Insert each letter by checking if it exists in children, create if missing, then move to that node.

3

Add searchPrefix method to find node for prefix

Add a method searchPrefix to the Trie class that takes a prefix: string and returns the TrieNode where the prefix ends, or null if the prefix is not found.

DSA Typescript

class TrieNode {
    children: Map;
    endOfWord: boolean;

    constructor() {
        this.children = new Map();
        this.endOfWord = false;
    }
}

class Trie {
    root: TrieNode;

    constructor() {
        this.root = new TrieNode();
    }

    insert(word: string): void {
        let current = this.root;
        for (const char of word) {
            if (!current.children.has(char)) {
                current.children.set(char, new TrieNode());
            }
            current = current.children.get(char)!;
        }
        current.endOfWord = true;
    }

    // Add searchPrefix method below
    // Your code here
}

Hint

Traverse the Trie nodes for each letter in prefix. If any letter is missing, return null.

4

Find and print autocomplete suggestions for a prefix

Write a function autocomplete that takes a prefix: string and a trie: Trie. Use searchPrefix to find the node for the prefix. Then, recursively collect all words starting from that node by exploring children. Finally, print the list of words starting with the prefix using console.log.

DSA Typescript

class TrieNode {
    children: Map;
    endOfWord: boolean;

    constructor() {
        this.children = new Map();
        this.endOfWord = false;
    }
}

class Trie {
    root: TrieNode;

    constructor() {
        this.root = new TrieNode();
    }

    insert(word: string): void {
        let current = this.root;
        for (const char of word) {
            if (!current.children.has(char)) {
                current.children.set(char, new TrieNode());
            }
            current = current.children.get(char)!;
        }
        current.endOfWord = true;
    }

    searchPrefix(prefix: string): TrieNode | null {
        let current = this.root;
        for (const char of prefix) {
            if (!current.children.has(char)) {
                return null;
            }
            current = current.children.get(char)!;
        }
        return current;
    }
}

const trie = new Trie();
const words = ["apple", "app", "apricot", "banana", "bat", "bath", "batman"];
for (const word of words) {
    trie.insert(word);
}

// Write autocomplete function and print suggestions for prefix "ba"
// Your code here

Hint

Use a helper function to explore all children nodes recursively and collect words.

Print the final list with console.log.

Practice

1. What is the main purpose of using a Trie in an autocomplete system?

easy

A. To efficiently store and search prefixes of words

B. To sort words alphabetically

C. To count the frequency of words

D. To encrypt the stored words

Solution

1. Step 1: Understand the role of Trie in prefix search

   A Trie is a tree-like data structure designed to store strings by their prefixes, allowing fast prefix-based searches.

2. Step 2: Connect Trie usage to autocomplete

   Autocomplete requires quick lookup of words starting with a given prefix, which Trie supports efficiently.

3. Final Answer:

   To efficiently store and search prefixes of words -> Option A

4. Quick Check:

   Trie = prefix search [OK]

Hint: Trie is built for prefix-based fast search [OK]

Common Mistakes:

• Confusing Trie with sorting algorithms
• Thinking Trie encrypts data
• Assuming Trie counts word frequency only

2. Which of the following is the correct TypeScript syntax to define a Trie node with children as a Map of characters to Trie nodes?

easy

A. class TrieNode { children: Array<string> = []; isEnd: boolean = false; }

B. class TrieNode { children: Map = new Map(); isEnd: boolean = false; }

C. class TrieNode { children: string[] = []; isEnd: boolean = true; }

D. class TrieNode { children: Map = new Map(); isEnd: boolean = false; }

Solution

1. Step 1: Identify correct data type for children

   Children should map characters (string) to TrieNode objects, so Map is correct.

2. Step 2: Check initialization and isEnd flag

   Children initialized as new Map(), and isEnd defaults to false indicating not end of word initially.

3. Final Answer:

   class TrieNode { children: Map = new Map(); isEnd: boolean = false; } -> Option B

4. Quick Check:

   Map for children [OK]

Hint: Children map chars to nodes using Map [OK]

Common Mistakes:

• Using array instead of Map for children
• Using number keys instead of string keys
• Setting isEnd to true by default

3. Given the following TypeScript code snippet for inserting words into a Trie and searching for prefix suggestions, what will be the output of autocomplete.getSuggestions('ca')?

class TrieNode {
  children: Map = new Map();
  isEnd: boolean = false;
}

class AutocompleteSystem {
  root: TrieNode = new TrieNode();

  insert(word: string) {
    let node = this.root;
    for (const char of word) {
      if (!node.children.has(char)) {
        node.children.set(char, new TrieNode());
      }
      node = node.children.get(char)!;
    }
    node.isEnd = true;
  }

  getSuggestions(prefix: string): string[] {
    let node = this.root;
    for (const char of prefix) {
      if (!node.children.has(char)) return [];
      node = node.children.get(char)!;
    }
    const results: string[] = [];
    const dfs = (currNode: TrieNode, path: string) => {
      if (currNode.isEnd) results.push(path);
      for (const [ch, nextNode] of currNode.children) {
        dfs(nextNode, path + ch);
      }
    };
    dfs(node, prefix);
    return results;
  }
}

const autocomplete = new AutocompleteSystem();
autocomplete.insert('cat');
autocomplete.insert('car');
autocomplete.insert('cap');
autocomplete.insert('dog');
console.log(autocomplete.getSuggestions('ca'));

medium

A. ["cat", "car"]

B. ["dog"]

C. []

D. ["cat", "car", "cap"]

Solution

1. Step 1: Insert words and traverse prefix 'ca'

   Words 'cat', 'car', 'cap' are inserted. Searching prefix 'ca' finds node with children 't', 'r', 'p'.

2. Step 2: DFS collects all words starting with 'ca'

   DFS from 'ca' node collects 'cat', 'car', and 'cap' as all end nodes under that prefix.

3. Final Answer:

   ["cat", "car", "cap"] -> Option D

4. Quick Check:

   Prefix 'ca' matches cat, car, cap [OK]

Hint: DFS from prefix node collects all words [OK]

Common Mistakes:

• Returning empty list if prefix found
• Returning unrelated words like 'dog'
• Missing one or more words starting with prefix

4. The following TypeScript code for the insert method in a Trie has a bug. What is the bug?

insert(word: string) {
  let node = this.root;
  for (const char of word) {
    if (!node.children.has(char)) {
      node.children.set(char, new TrieNode());
    }
    node = node.children.get(char);
  }
  node.isEnd = true;
}

medium

A. Missing non-null assertion operator (!) when getting child node

B. Children map should be an array, not Map

C. isEnd should be set to false, not true

D. Loop should iterate over indices, not characters

Solution

1. Step 1: Identify potential null or undefined access

   node.children.get(char) can return undefined if key missing, so TypeScript requires non-null assertion or check.

2. Step 2: Fix by adding non-null assertion operator

   Adding '!' after get(char) tells TypeScript the value is not undefined, fixing the bug.

3. Final Answer:

   Missing non-null assertion operator (!) when getting child node -> Option A

4. Quick Check:

   Use get(char)! to avoid undefined [OK]

Hint: Use '!' after get() to assure non-null [OK]

Common Mistakes:

• Ignoring TypeScript undefined error
• Changing data structure unnecessarily
• Setting isEnd incorrectly

5. You want to extend the autocomplete system to return suggestions sorted by their frequency of insertion (most frequent first). Which data structure modification is best to support this efficiently?

hard

A. Store all words in a separate array and sort on each query

B. Use a binary search tree instead of a Trie

C. Add a frequency count field to each Trie node marking end of word

D. Remove the isEnd flag and rely on children count

Solution

1. Step 1: Understand frequency tracking in Trie

   Adding a frequency count to nodes marking word ends allows tracking how often each word was inserted.

2. Step 2: Use frequency to sort suggestions efficiently

   During DFS for suggestions, use frequency counts to sort or prioritize words without extra data structures.

3. Final Answer:

   Add a frequency count field to each Trie node marking end of word -> Option C

4. Quick Check:

   Frequency field in Trie nodes enables sorting [OK]

Hint: Track frequency in nodes to sort suggestions fast [OK]

Common Mistakes:

• Sorting all words on each query (slow)
• Replacing Trie with BST loses prefix efficiency
• Removing isEnd loses word boundary info