Search fictional titles by case-insensitive substring and read their shelf locations. Empty input restores all five titles, while a zero-match search gets a distinct result count.
Define the search before decorating the keyboard
Use this fictional collection: World atlas, A-1; Animal atlas, A-2; Backyard birds, B-1; Weather notes, C-1; and Mapmaking basics, A-3. Search title text with a case-insensitive substring match.
The query atlas returns two results. BIRDS returns Backyard birds at B-1. A query of oceans returns zero. An empty query displays all five titles, with the heading "All 5 titles" so the reader can distinguish an unfiltered list from a failed search.
Trim outside spaces from the query for matching. Keep the title strings unchanged. This small search does not search a real library catalog, check whether a book is checked out, or reserve a copy. Its useful output is a matching title and a shelf label.
Choose hints by the action a person will take
Search suits a title query. Next suits a field whose intended next action is progressing to another input. Send suits sending text to its target. Done suggests that entry is finished. Enter suggests inserting a line break. These labels help communicate intent; they do not implement focus movement, delivery, or line handling on their own.
Keep this example to a single search action rather than offering a selector that changes the hint while leaving the same behavior underneath. A label that promises Send would be misleading on a page with no delivery operation.
After a search, leave focus in the field so the reader can refine it. Put a visible result count immediately below the form. For zero results, echo the submitted query as text and offer Clear search. Clearing should reset the input and restore all five titles.
Wire the two actions to one lookup
Use a visible Search button with an explicit click handler. Give the search input its own keydown handler for Enter and ignore events while isComposing is true. Both paths call the same title-matching function. Keep the handler scoped to the search input, so Enter on a different control does not trigger a lookup.
After matching, leave the query available for refinement and put the count next to the results. Echo a zero-match query as text rather than interpreting it as markup. Clear empties the field, restores the unfiltered five-title view, and returns focus to the field. It does not send or erase anything from a remote collection.
For an actual mobile review, check the visible key presentation with the device’s browser, input method, and language. Desktop button or keyboard behavior does not establish the appearance of a virtual keyboard. Keep the explicit button even after the requested label appears, because the reader should always have an identifiable action control.
Try the worked example
Search atlas to see the two atlas titles and distinct shelf labels. Search BIRDS to find B-1. Try oceans for zero matches, then Clear for all 5. The visible Search button remains available when the device’s keyboard label differs. The hint describes an action; the handler performs it.
This searches a fixed fictional collection, not a real catalog, checkout system, reservation service, or tested mobile keyboard.
Recreate this example
Build one complete self-contained HTML page for this task: build a local shelf-title finder with a matching virtual-keyboard hint and explicit search action.
Use these exact original practice data and worked expectations: World atlas A-1; Animal atlas A-2; Backyard birds B-1; Weather notes C-1; Mapmaking basics A-3. atlas → 2; BIRDS → Backyard birds B-1; oceans → 0; empty → all 5.
Implement the following useful local interactions: Use labeled type=search input enterkeyhint=search, type=button Search and Clear. Input-scoped Enter invokes the same search function, ignores isComposing, prevents default navigation; no form submit dependency. Case-insensitive substring, trim outside spaces, keep titles unchanged. Preserve the supplied source text and distinguish an uncomputed state, a successful local result, and an invalid or incomplete input. Update output only from the current input snapshot. An input edit must retire stale feedback until the reader runs the relevant action again. Do not silently invent missing values or replace a failing case with a success.
Design the page as a compact source-and-result developer workbench with readable code, labeled inputs, and a separate explanation area. Put a compact task heading, actual sample data, the main result, and usable controls early enough to be useful on a narrow screen. Use readable text of at least 16px, generous paragraph spacing, strong contrast, native labels, accessible buttons, and visible keyboard focus. Stack long records at 360px and wrap code without page-level horizontal overflow.
Use type=button and explicit querySelector-based click handlers rather than relying on form submission. If Enter is useful, handle it only on the relevant input and ignore isComposing. Keep effects within this open page; no remote dependencies, network calls, persistence, fake downloads, or automated sending. This searches a fixed fictional collection, not a real catalog, checkout system, reservation service, or tested mobile keyboard. Place worked explanations beside their data and identify teacher or synthetic examples clearly. Output only the complete HTML document, with inline styles and script and LF line endings.
Review the five-title shelf finder in NOS
Replace the five practice titles with the collection you intend to display, then verify the search on target devices. Review the two atlas matches and the zero-match oceans message in NOS, and revise eligible static search instructions in visual editing mode before the device check.