Search Input with Recent Searches Form Block for React

Replace TITLES with your records and change matches, which compares what was typed with the title and the creator after removing accents and case, so "resume" finds "Résumé". The results, the marks, the count and the empty state all follow from it. For a large catalogue run the search on your server in the submit handler, keep the results in the same region and keep its fixed height so the panel never moves.

A search that runs on Enter is a form: it works with a keyboard, a screen reader and a phone's Search key, it can be a plain GET request to your search page, and it needs no debounce. The cost is one more press; for a live filter of a list that is already on the page, choose the table search block instead. Under two characters the field says so on Enter, never while you are typing.

While focus is inside the block, pressing the slash key (when you are not typing in a field) moves focus to the search field, and its hint hides on touch screens, which have no key for it. Escape in the field clears the text and the results and puts the block back to its prompt. Both are scoped to the block, so they never take over the page's own shortcuts.

Each search goes to the front of a list of at most five, without repeats; a chip runs it again and its X removes it, moving focus to the next chip, or to the field when none is left. They live in the page's state and are gone on reload. To keep them, store the list in localStorage in a try and catch (it can be refused), read it in an effect after mount and keep a way to clear it.

One polite status line in the foot says what a search found ("3 results for “ham”") or why it did not run, and nothing is announced while you type. The results are a list in a region named Search results that you can scroll with the keyboard; on a phone the recent chips scroll sideways.

A search box rarely needs a form library: give the field a name (it is q), keep the form a GET request to your search page and read the value in the submit handler. If you do use react-hook-form, register the field with Controller and call your search from handleSubmit. The two-character rule belongs in the submit handler, so it speaks on Enter and not while typing.