Build a contact search filter. The component keeps a fixed list of contact names and narrows the rendered list as the user types a search term.

The component class must keep this exact list (already provided in the starter code):

contacts = ['Amy Adams', 'Bob Brown', 'Carla Cruz', 'Dan Diaz', 'Amy Winter'];

Render an <input> element with the class search that updates the stored search term on every input event. Below it, render a <ul> element with the class results containing exactly one <li> per matching contact. A contact matches when its name contains the search term as a case-insensitive substring. When the search term is empty, all 5 contacts must be listed.

Examples:

Initial render (empty search term): <input class="search"> <ul class="results"> ... 5 <li> items ... </ul> Type "amy" -> 2 items: Amy Adams, Amy Winter Type "BOB" -> 1 item: Bob Brown Type "zzz" -> 0 items Clear input -> all 5 items again
LWC

Preview

Press Run & Test to compile and preview your component.

Test results

Tests run automatically after each compile.

Wally can't hear you

Please sign in to access the AI Assistant

Sign In