Search

An instant search UI component for the Web aimed to be light, agnostic and effective.


Features

- instant search
- highlight search term matches
- show match context
- easy to install
- runs locally on the browser
- not overly complicated
- does not require any kind of framework or tooling
- Fuse.js is the sole dependency
- works when offline (DocSearch doesn't)
- works behind authentication (DocSearch doesn't)
- do not track users (DocSearch doesn't?)
- acessibility (please fill a report if it doesn't work properly with screen readers)

Caveats

- It does not support context-wise search at headings level as DocSearch does.
- Fuse.js is kind of dead.

Demo

Check the demo. It uses Hugo.

Usage

$3

It expects JSON data at /index.json but this can be changed with dataPath option.

Expected keys are title, description, url, image (optional) and id (optional).

``json
{
"id": "3db3e4a737a176646e0c3b8d5f25d392",
"url": "/lorem-ipsum/",
"title": "Lorem Ipsum"
}
,
{
"id": "e62701a89b303de6e24cb577ee9d5614",
"url": "/dolor-sit-amet/",
"title": "Dolor Sit Amet"
}
`

$3


`javascript
import Search from 'lite-search'

Search({
// comment keys that aren't going to be used.
keys: [
{ name: "title", weight: 7 },
{ name: "description", weight: 3 },
{ name: "content", weight: 1 }
],

// optionally provide an alias when key names on JSON differ from what the script expects.
aliases: [
// { input: "title", output: "description" },
// { input: "description", output: "title" }
],

dataPath: "/index.json",
// dataPath: "/" + basePath + lang + "/index.json", // for multilingual
formSelector: "#search",
minInputLength: 0,
matchStrategy: "fuzzy",
maxResults: 10,
maxContextLength: 250,
includeMatches: false, // NOTE: use 'exact' for matchStrategy
showSectionOnTitle: true,
modalFullscreen: false
})
`

Use NPM with a bundler like ESBuild. Or, as in the case of Hugo, use it's JS Building feature to build a script. If you can't or don't want to use NPM you can use the pre-bundled (lite-search + fuse.js) distributables at dist/.


`html

`

When the call and the script are enclosed together (bundled) they can be loaded asynchronously, otherwise you will have to defer the call until the script is loaded.

`html


`

$3


`html

``