https://github.com/danisztls/site-search
A standalone instant search component.
https://github.com/danisztls/site-search
jamstack search web
Last synced: 2 months ago
JSON representation
A standalone instant search component.
- Host: GitHub
- URL: https://github.com/danisztls/site-search
- Owner: danisztls
- License: mit
- Created: 2021-10-03T18:48:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T20:47:03.000Z (over 3 years ago)
- Last Synced: 2026-01-12T15:53:26.608Z (5 months ago)
- Topics: jamstack, search, web
- Language: JavaScript
- Homepage:
- Size: 182 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Search
An instant search UI Web component aimed to be light, agnostic and effective.
[](https://app.netlify.com/sites/lite-search-example-f99854/deploys)
## 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](https://fusejs.io/) is the sole dependency
- works when offline *(DocSearch doesn't)*
- works behind authentication *(DocSearch doesn't)*
- do not track users *(DocSearch doesn't?)*
- accessibility *(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](https://docsearch.algolia.com/) does.
- Fuse.js is kind of dead.
## Demo
Check the [demo](https://lite-search-example-f99854.netlify.app/). It uses Hugo.
## Install
### NPM
```shell
npm install lite-search
```
```javascript
import Search from 'lite-search'
Search({...})
```
### Standalone
If you can't or don't want to use NPM you can use the bundled (**lite-search** + **fuse.js**) standalone distributables at `dist/`.
*Note: this repository uses Git LFS and you need to have it installed in your environment to successfully clone it.*
```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
Search({...})
```
## Usage
### Data
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"
}
```
### JS
```javascript
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-form",
modalSelector: "#search-modal",
minInputLength: 0,
matchStrategy: "fuzzy",
maxResults: 10,
maxContextLength: 250,
includeMatches: false, // NOTE: use 'exact' for matchStrategy
showSectionOnTitle: true,
modalFullscreen: false
})
```
### HTML
```html
```