meilisearch docsearch

meilisearch-docsearch

Un componente de búsqueda rápida para meilisearch, inspirado en algolia/docsearch.

Capturas de pantalla

luz	oscuro

Uso a través de NPM (recomendado)

Instalación

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

JavaScript

Para comenzar, necesita un contenedor para su componente DocSearch . Si aún no tiene uno, puede insertar uno en su marcado:

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

Luego, inserte DocSearch llamando a la función docsearch y proporcionando el contenedor. Puede ser un selector CSS o un elemento.

Asegúrese de proporcionar un container (por ejemplo, un div ), no un input . DocSearch genera un cuadro de búsqueda totalmente accesible para usted.

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

Estilo

Todos los estilos están incluidos en el paquete como:

• Un archivo grande:

  •  import "meilisearch-docsearch/css" ;

• Archivos pequeños individuales:

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

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

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

SolidJS

Si está utilizando solid-js , puede importar el componente DocSearch directamente, lo que genera un cuadro de búsqueda totalmente accesible.

 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 ;

Uso a través de CDN

El paquete también contiene un paquete de navegador y los estilos necesarios que se pueden extraer a través de una CDN como unpkg.com:

1. agregar un contenedor

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

2. importar el paquete js borwser e inicializar el componente

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

   alternativamente, puede importar el módulo ESM cuando utilice <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. importar estilos

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

Reconocimiento

Este proyecto está inspirado en algolia/docsearch y meilisearch/docs-searchbar.js

LICENCIA

MIT o MIT/Apache 2.0 cuando corresponda.