Advanced 35 min read

Project: Account Search Tool

By the end of this lesson, you'll be able to:

  • Build a reactive, Apex-backed search-as-you-type Account finder
  • Apply caching-aware search term handling
  • Normalize input to avoid defeating wire caching

Prerequisites: "Project: Lead Management Application"

What We're Building

An accountSearchTool component with a search box that reactively queries Accounts as the user types, applying Module 13's lesson on normalizing input before it reaches a cacheable wire.

The Component

import { LightningElement, wire } from 'lwc';
import search from '@salesforce/apex/AccountSearchController.search';

export default class AccountSearchTool extends LightningElement {
    rawSearchTerm = '';
    debouncedTerm = '';
    debounceTimer;

    @wire(search, { searchTerm: '$debouncedTerm' })
    results;

    handleSearchChange(event) {
        this.rawSearchTerm = event.target.value;

        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
            this.debouncedTerm = this.rawSearchTerm.trim().toLowerCase();
        }, 300);
    }

    get accounts() {
        return this.results?.data ?? [];
    }
}

Debouncing (waiting 300ms after the user stops typing before updating debouncedTerm) avoids firing a server call on every single keystroke; normalizing with .trim().toLowerCase() (Module 13) keeps equivalent searches actually matching in the wire cache rather than defeating it with inconsistent casing.

Exercise

Explain, as a comment, why debouncedTerm — not rawSearchTerm — is what's passed into the @wire call.

Show hint

Think about what would happen if the raw, unthrottled value were wired directly.

JAVASCRIPT

Exercise

Challenge: what would happen if clearTimeout(this.debounceTimer) were removed from handleSearchChange?

Show hint

Think about what accumulates if every keystroke schedules a new timer without canceling the previous one.

JAVASCRIPT

Project: Account Search Tool Quiz

1. What does debouncing accomplish in this component?

2. Why is the search term normalized with .trim().toLowerCase()?

3. What would happen without clearTimeout before scheduling a new debounce timer?

4. What is passed as the reactive parameter to the search wire?

5. Which module's caching lesson does this project directly apply?

Log in to submit the quiz and save your score.

My Notes

Log in to keep private notes on this lesson.

Questions about this lesson

No questions yet — be the first to ask.

Log in to ask a question about this lesson.

Summary

A search-as-you-type Account finder applying Module 13's caching discipline directly — normalized input, a reactive wire parameter, and a debounce to avoid firing a call on every single keystroke.

Log in to track progress
← Project: Lead Management Application Project: Contact Management Application →