Live Search FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. The header's count, the placeholder and the empty state all read from the array, so nothing else needs touching. Ten questions fit about one screen; past twenty, group them by topic or add "Show more".

The question and its answer, ignoring case and accents, matching the typed text anywhere in either, so "resume" finds "Résumé". While a query is typed, every matching row opens so you can see the marked words in its answer; you can still open and close rows yourself, and clearing the field closes them all. To search only the questions, drop item.answer from matches.

Each matched word is a real mark element from Search Highlight Text, underlined and then filled from the underline up in the foreground colour at 14%, so it reads in any theme. With reduced motion the marks are simply there. Change the tint in MARK.

No. The list has a floor height, so filtering to two rows leaves the space below intact; the count above the list is the only line that changes. If nothing matches, an empty state says "No questions match" with the typed words and a Clear search button that also returns focus to the field.

Yes, when no search is active. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match. While a query is typed, rows that don't match are removed.

The field has a name ("Search the questions"), the count under it is a polite status, so each change is announced ("4 of 10 questions"), and every question is a button inside its own h3 under the section's h2. Escape in the field clears it. Enter or Space opens and closes a row, and Tab moves between rows and the Clear button.