meilisearch docsearch

meilisearch-docsearch

Eine Schnellsuchkomponente für meilisearch, inspiriert von algolia/docsearch.

Screenshots

Licht	dunkel

Nutzung über NPM (empfohlen)

Installation

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

Javascript

Um zu beginnen, benötigen Sie einen Container für Ihre DocSearch Komponente. Wenn Sie noch keinen haben, können Sie einen in Ihr Markup einfügen:

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

Fügen Sie dann DocSearch ein, indem Sie die docsearch -Funktion aufrufen und den Container bereitstellen. Es kann ein CSS-Selektor oder ein Element sein.

Stellen Sie sicher, dass Sie einen container (z. B. ein div ) und kein input bereitstellen. DocSearch generiert für Sie ein vollständig zugängliches Suchfeld.

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

Styling

Alle Stile sind im Paket enthalten als:

• Eine große Datei:

  •  import "meilisearch-docsearch/css" ;

• Einzelne kleine Dateien:

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

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

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

SolidJS

Wenn Sie solid-js verwenden, können Sie DocSearch Komponente direkt importieren, wodurch ein vollständig zugängliches Suchfeld für Sie generiert wird.

 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 ;

Nutzung über CDN

Das Paket enthält außerdem ein Browser-Bundle und die notwendigen Stile, die über ein CDN wie unpkg.com abgerufen werden könnten:

1. Fügen Sie einen Container hinzu

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

2. Importieren Sie das js-Borwser-Bundle und initialisieren Sie die Komponente

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

   Alternativ können Sie das ESM-Modul importieren, wenn Sie <script type="module"> verwenden

    < 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. Stile importieren

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

Anerkennung

Dieses Projekt ist inspiriert von algolia/docsearch und meilisearch/docs-searchbar.js

LIZENZ

Gegebenenfalls MIT oder MIT/Apache 2.0.