Search-with-your-keyboard NPM

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.

Behavior

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.

Installation

npm install search-with-your-keyboard

Usage

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')

Styles

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 :hovering on a hit:

.ais-hits--item:hover, .ais-hits--item.active {
  background-color: #F0F0F0;
}

API

`searchWithYourKeyboard(inputSelector, hitsSelector)`

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