https://github.com/zachleat/pagefind-search
A web component to search with Pagefind.
https://github.com/zachleat/pagefind-search
Last synced: over 1 year ago
JSON representation
A web component to search with Pagefind.
- Host: GitHub
- URL: https://github.com/zachleat/pagefind-search
- Owner: zachleat
- License: mit
- Created: 2023-11-30T15:23:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-06T17:22:43.000Z (over 2 years ago)
- Last Synced: 2025-04-18T00:11:32.265Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://zachleat.github.io/pagefind-search/
- Size: 183 KB
- Stars: 33
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pagefind-search
Web Component to easily add the [Pagefind search UI](https://pagefind.app/) to your web site. This unlocks more control of asset loading via [``](https://www.11ty.dev/docs/plugins/partial-hydration/).
## Usage
```html
Search for:
Search
```
### Extend Pagefind Options
Any attribute that starts with an underscore will be passed to the Pagefind constructor as an option. Use underscore case for option names (as HTML attributes are case insensitive). This is only compatible with boolean/number/string options (but read on for a solution for the others below). Full [options list on the Pagefind documentation](https://pagefind.app/docs/ui/).
* `_page_size` for `pageSize`
* `_show_sub_results` for `showSubResults`
* `_show_images` for `showImages`
* `_excerpt_length` for `excerptLength`
* (not attribute-friendly, read below) `processTerm`
* (not attribute-friendly, read below) `processResult`
* `_show_empty_filters` for `showEmptyFilters`
* `_reset_styles` for `resetStyles`
* `_bundle_path` for `bundlePath`
* `_debounce_timeout_ms` for `debounceTimeoutMs`
* (not attribute-friendly, read below) `translations`
```html
```
#### Advanced: Full JavaScript access
Use the `manual` attribute to manually initialize your Pagefind UI with any custom options (including functions, objects, etc).
```html
let el = document.querySelector("#my-search");
await el.pagefind({
showImages: false,
debounceTimeoutMs: 100,
processTerm: function (term) {
return term.replace(/aa/g, 'ā');
}
});
// Use `el.pagefindUI` to access the PagefindUI instance
```
### Loading via Islands
Use [`` to enable more control over the component’s downstream asset loading](https://www.11ty.dev/docs/plugins/partial-hydration/).
```html
```
If search is a secondary feature on a page, you _could_ lazy load the component definition too, though that would chain two separate JavaScript file loads together which is probably not what you want:
```html
```
#### Eager CSS Loading
You can optionally load the Pagefind CSS yourself! This is useful if Search is a primary use case for the page and loads the 3 kB (compressed) Stylesheet up front but will still allow lazy loading the 20 kB (compressed) JavaScript file via ``.
```html
```
### Full Attribute List
* `pagefind-autofocus` to focus on the form element after pagefind has initialized.
* `manual` for manual initialization.