Skip to main content
ELYTE
EasyFrontendBuild

Live Search Filter

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"`...

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptDOM & EventsData TransformationDOM ManipulationEventsStrings

Requirements

  • Render `search-input`, `items-list`, and one `item` row per visible result.
  • Filter by trimmed, case-insensitive substring match.
  • Show all items when the trimmed query is empty.
  • Filtering must change the rendered items; CSS-only hiding is not sufficient.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 1500ms judge budget.
  • Requires test IDs: app, search-input, items-list.
  • Checks repeated UI regions: item.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Case Insensitive Match.

Constraints

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

Example behavior

Input
items = ["Apple", "Banana", "Grape", "Pineapple"]
User types: "ap"
Output
Visible list items: ["Apple", "Grape", "Pineapple"]

Follow-up

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