Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Search the server as the user types.
Live Search & Autocomplete is easiest to learn by reading the example, changing it, and observing the result.
const input = document.querySelector('#search');
const results = document.querySelector('#results');
input.addEventListener('input', async () => {
const res = await fetch('/api/search?q=' + encodeURIComponent(input.value));
const items = await res.json();
results.innerHTML = items.map(i => `<li>${i.title}</li>`).join('');
});Practice the Live Search & Autocomplete example in a small scratch file, then explain what changed and why.