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 <a> tag in the current .active hit, if present. |
cmdOrCtrl+Enter | Opens the window in new tab and focus it. |
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.
const searchWithYourKeyboard = require('search-with-your-keyboard')
searchWithYourKeyboard('#search-input', '.ais-hits--item')
You should specify styles for the .active
class on your hits,
to make the currently active hit visible to the user. You may want this
to be the same style as :hover
ing on a hit:
.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
hitsSelector
String (required) - A CSS selector used to find all hits, e.g..ais-hits--item
npm install
npm test
MIT