Standalone instant search component.
npm install lite-search
/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"
}
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
``