Search · ngb-bootstrap

A site search like the one on these docs: a button that opens a modal with a search field, results as you type, and the pages the user opened recently or saved. You find the results; the component draws them, handles the keyboard and remembers what was opened. Try it with Ctrl K (⌘K on a Mac).

Basic

Pass search a function that takes the query and returns results: a title, a section line and a link. Results with a group are listed under it. Choosing one emits selected and goes to its link with the router (a URL with a scheme opens with a full page load). Before you type, the dialog lists Recent and Favorites, kept in localStorage under storageKey; give each search on a site its own key. These examples set [hotkey]="false", as Ctrl K belongs to the search in the navbar.

Opened: nothing yet

Results from a server

search can return a promise. It runs on every change of the query, and an answer that arrives after a newer query is ignored, so a search over the network should debounce or cancel by itself. label names the button and the dialog. These results link to Wikipedia.

Accessibility

The button has aria-haspopup="dialog" and announces its shortcut with aria-keyshortcuts. The dialog is a native modal <dialog> named after the button. Focus starts in the field and returns to the button when the dialog closes.

The field is a role="combobox" that controls a listbox of results, and the highlighted result is its aria-activedescendant, so focus never leaves the field. Arrow Up and Arrow Down move the highlight, Enter opens the highlighted result, and Escape closes. Ctrl D (⌘D) saves the highlighted result to Favorites or removes it, and Delete removes a saved result. The field describes these keys to screen readers, and a status region reads out how many results were found. The star and remove icons on saved rows are a mouse shortcut for the same keys, so they are hidden from assistive technology.