Add keyboard navigation to your existing client-side search interface
npm install search-with-your-keyboard> Add keyboard navigation to your existing client-side search interface.
This module is designed to make [Algolia InstantSearch] results (aka "hits") navigable
with a keyboard. It's not Algolia-specific though, and should work with any
search setup so long as it includes a search input and a list of
client-side-updated results.
Key | Action
--- | ------
/ | Focuses the search input.
esc | Focuses the search input and clears it.
down | Adds an active class to the next (visible) hit. Only applies when the search input contains a value.
up | Adds an active class to the previous (visible) hit. If already on the first search hit, the search input is focused. Only applies when the search input contains a value.
enter | Sets window.location to the href of the first tag in the current .active hit, if present.
cmdOrCtrl+Enter | Opens the window in new tab and focus it.
``sh`
npm install search-with-your-keyboard
The module exports a single function that expects two CSS selector strings as
arguments: one for the input element, one for the set of hit elements.
`js
const searchWithYourKeyboard = require('search-with-your-keyboard')
searchWithYourKeyboard('#search-input', '.ais-hits--item')
`
You should specify styles for the .active class on your hits,:hover
to make the currently active hit visible to the user. You may want this
to be the same style as ing on a hit:
`css`
.ais-hits--item:hover, .ais-hits--item.active {
background-color: #F0F0F0;
}
Arguments:
- inputSelector String (required) - A CSS selector used to find the search input, e.g. #search-input
- String (required) - A CSS selector used to find all hits, e.g. .ais-hits--item
`sh``
npm install
npm test
MIT
[Algolia InstantSearch]: https://github.com/algolia/instantsearch.js