meilisearch docsearch

meilisearch-docsearch

Un composant de recherche rapide pour meilisearch, inspiré d'algolia/docsearch.

Captures d'écran

lumière	sombre

Utilisation via NPM (recommandé)

Installation

yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch

Javascript

Pour commencer, vous avez besoin d'un conteneur pour votre composant DocSearch . Si vous n'en avez pas déjà un, vous pouvez en insérer un dans votre balisage :

 < div id =" docsearch " > </ div >

Ensuite, insérez-y DocSearch en appelant la fonction docsearch et en fournissant le conteneur. Il peut s'agir d'un sélecteur CSS ou d'un Element.

Assurez-vous de fournir un container (par exemple, un div ), et non un input . DocSearch génère pour vous un champ de recherche entièrement accessible.

 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" ,
} ) ;

Stylisme

Tous les styles sont inclus dans le package comme :

• Un gros fichier :

  •  import "meilisearch-docsearch/css" ;

• Petits fichiers individuels :

  •  import "meilisearch-docsearch/css/variables" ; 

  •  import "meilisearch-docsearch/css/button" ; 

  •  import "meilisearch-docsearch/css/modal" ; 

SolidJS

Si vous utilisez solid-js , vous pouvez importer directement le composant DocSearch qui génère un champ de recherche entièrement accessible pour vous.

 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 ;

Utilisation via CDN

Le package contient également un ensemble de navigateurs et les styles nécessaires qui peuvent être extraits via un CDN comme unpkg.com :

1. ajouter un conteneur

    < div id =" docsearch " > </ div >

2. importer le bundle js borwser et initialiser le composant

    < 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 >

   vous pouvez également importer le module ESM en utilisant <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 >

3. importer des styles

    < link
     rel =" stylesheet "
     href =" https://unpkg.com/meilisearch-docsearch@latest/dist/index.css "
   />

Reconnaissance

Ce projet est inspiré de algolia/docsearch et meilisearch/docs-searchbar.js

LICENCE

MIT ou MIT/Apache 2.0 le cas échéant.