A quick search component for meilisearch, inspired by algolia/docsearch.
light | dark |
---|---|
yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch
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:
<div id="docsearch"></div>
Then, insert DocSearch
into it by calling the docsearch
function and providing the container. It can be a CSS selector or an Element.
Make sure to provide a container
(for example, a div
), not an input
. DocSearch
generates a fully accessible search box for you.
import { docsearch } from "meilisearch-docsearch";
import "meilisearch-docsearch/css";
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
All styles are included in the package as:
import "meilisearch-docsearch/css";
import "meilisearch-docsearch/css/variables";
import "meilisearch-docsearch/css/button";
import "meilisearch-docsearch/css/modal";
If you are using solid-js
, you can import DocSearch
component directely which generates a fully accessible search box for you.
import { DocSearch } from "meilisearch-docsearch/solid";
import "meilisearch-docsearch/css";
function App() {
return (
<DocSearch
host="YOUR_HOST_URL"
apiKey="YOUR_SEARCH_API_KEY"
indexUid="YOUR_INDEX_UID"
/>
);
}
export default App;
The package also contains a browser bundle and the necessary styles that could be pulled through a CDN like unpkg.com:
add a container
<div id="docsearch"></div>
import the js borwser bundle and initialize the component
<script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script>
<script>
const { docsearch } = window.__docsearch_meilisearch__;
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
</script>
alternatively you can import the ESM module when using <script type="module">
<script type="module" async>
import { docsearch } from "https://unpkg.com/meilisearch-docsearch@latest/dist/index.bundled.esm.js";
docsearch({
container: "#docsearch",
host: "YOUR_HOST_URL",
apiKey: "YOUR_SEARCH_API_KEY",
indexUid: "YOUR_INDEX_UID",
});
</script>
import styles
<link
rel="stylesheet"
href="https://unpkg.com/meilisearch-docsearch@latest/dist/index.css"
/>
This project is inspired by algolia/docsearch
and meilisearch/docs-searchbar.js
MIT or MIT/Apache 2.0 where applicable.