Build live search
Combine debounce, abort, loading states and accessible results.
What you will be able to do
- Debounce input by 250ms.
- Abort the previous request.
- Render loading, empty, error and results.
- Announce the count in a live region.
In plain English
The project builds a search box that waits for typing to pause, cancels stale requests and renders results, empty states and errors. Announce result counts politely for screen readers.
let timer
let controller
input.addEventListener('input', () => {
clearTimeout(timer)
const term = input.value.trim()
timer = setTimeout(async () => {
if (term.length < 2) return render([])
controller?.abort()
controller = new AbortController()
setLoading(true)
try {
const response = await fetch('/api/search?q=' + encodeURIComponent(term), { signal: controller.signal })
render(await response.json())
} catch (error) {
if (error.name !== 'AbortError') renderError()
} finally {
setLoading(false)
}
}, 250)
})Your turn
MediumDebounce the input
Wrap the search call in a 250ms setTimeout and clear the previous timer.
JAVASCRIPT · starter
input.addEventListener('input', () => {Check your understanding before moving on.
Knowledge checkQuestion 1
Why require at least two characters before searching?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.