Problem 4

Live Search Filter

EASYBUILD

DOM Manipulation+2

Given an array of strings items, build a live search filter. Render an input with data-testid="search-input" and a list container with data-testid="items-list". Each item is a row element with data-testid="item". As the user types, show only items whose text contains the trimmed query as a case-insensitive substring. If the query is empty, show all items. Implement filtering in JavaScript — CSS-only hiding is not sufficient.

Examples

Example 1

Input

items = ["Apple", "Banana", "Grape", "Pineapple"]
User types: "ap"

Output

Visible list items: ["Apple", "Grape", "Pineapple"]

Constraints

Filtering must be case-insensitive and use the trimmed query
items[i] may contain spaces and special characters

Follow-up

Can you highlight the matching substring in each visible item without changing the filtering behavior?

Hints

Console output will appear here...