Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tauri-apps/meilisearch-docsearch
A quick search component for meilisearch, inspired by algolia/docsearch.
https://github.com/tauri-apps/meilisearch-docsearch
autocomplete docs docsearch meilisearch quicksearch quicksearchbar search
Last synced: about 2 months ago
JSON representation
A quick search component for meilisearch, inspired by algolia/docsearch.
- Host: GitHub
- URL: https://github.com/tauri-apps/meilisearch-docsearch
- Owner: tauri-apps
- License: apache-2.0
- Created: 2023-01-30T00:11:12.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-04-11T02:36:46.000Z (3 months ago)
- Last Synced: 2024-04-14T10:15:55.721Z (3 months ago)
- Topics: autocomplete, docs, docsearch, meilisearch, quicksearch, quicksearchbar, search
- Language: TypeScript
- Homepage:
- Size: 572 KB
- Stars: 64
- Watchers: 13
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE_APACHE-2.0
Lists
- awesome-meilisearch - meilisearch-docsearch - A quick search component for Meilisearch, inspired by algolia/docsearch. (Tools / Community Tools)
README
# meilisearch-docsearch
A quick search component for meilisearch, inspired by algolia/docsearch.
# Screenshots
| light | dark |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|  |  |
# Usage through NPM (Recommended)
### Installation
```sh
yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch
```
### Javascript
To get started, you need a container for your `DocSearch` component to go in. If you don’t have one already, you can insert one into your markup:
```html
```
Then, insert `DocSearch` into it by calling the `docsearch` function and providing the container. It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/web/css/css_selectors) or an [Element](https://developer.mozilla.org/en-us/docs/web/api/htmlelement).
Make sure to provide a `container` (for example, a `div`), not an `input`. `DocSearch` generates a fully accessible search box for you.
```js
import { docsearch } from "meilisearch-docsearch/js";
import "meilisearch-docsearch/css";
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
```
### Styling
All styles are included in the package as:
- One big file:
- ```js
import "meilisearch-docsearch/css";
```
- Individual small files:
- ```js
import "meilisearch-docsearch/css/variables";
```
- ```js
import "meilisearch-docsearch/css/button";
```
- ```js
import "meilisearch-docsearch/css/modal";
```
## SolidJS
If you are using `solid-js`, you can import `DocSearch` component directely which generates a fully accessible search box for you.
```js
import { DocSearch } from "meilisearch-docsearch/solid";
import "meilisearch-docsearch/css";
function App() {
return (
);
}
export default App;
```
# Usage through CDN
The package also contains a browser bundle and the necessary styles that could be pulled through a CDN like unpkg.com:
1. add a container
```html
```
2. import the js borwser bundle and initialize the component
```html
const { docsearch } = window.__docsearch_meilisearch__;
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
```
3. import styles
```html
```
# Acknowledgement
This project is inspired by [`algolia/docsearch`](https://github.com/algolia/docsearch/) and [`meilisearch/docs-searchbar.js`](https://github.com/meilisearch/docs-searchbar.js/)
# LICENSE
MIT or MIT/Apache 2.0 where applicable.