meilisearch docsearch

meilisearch-docsearch

Komponen pencarian cepat untuk meilisearch, terinspirasi oleh algolia/docsearch.

Tangkapan layar

lampu	gelap

Penggunaan melalui NPM (Disarankan)

Instalasi

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

skrip java

Untuk memulai, Anda memerlukan wadah untuk memasukkan komponen DocSearch Anda. Jika Anda belum memilikinya, Anda dapat menyisipkannya ke dalam markup Anda:

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

Kemudian, masukkan DocSearch ke dalamnya dengan memanggil fungsi docsearch dan menyediakan containernya. Ini bisa berupa pemilih CSS atau Elemen.

Pastikan untuk menyediakan container (misalnya, div ), bukan input . DocSearch menghasilkan kotak pencarian yang dapat diakses sepenuhnya untuk Anda.

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

Penataan gaya

Semua gaya termasuk dalam paket sebagai:

• Satu file besar:

  •  import "meilisearch-docsearch/css" ;

• File kecil individual:

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

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

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

SolidJS

Jika Anda menggunakan solid-js , Anda dapat mengimpor komponen DocSearch secara langsung yang menghasilkan kotak pencarian yang dapat diakses sepenuhnya untuk Anda.

 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 ;

Penggunaan melalui CDN

Paket ini juga berisi bundel browser dan gaya yang diperlukan yang dapat ditarik melalui CDN seperti unpkg.com:

1. tambahkan wadah

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

2. impor bundel js borwser dan inisialisasi komponen

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

   alternatifnya, Anda dapat mengimpor modul ESM saat menggunakan <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. gaya impor

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

Pengakuan

Proyek ini terinspirasi oleh algolia/docsearch dan meilisearch/docs-searchbar.js

LISENSI

MIT atau MIT/Apache 2.0 jika berlaku.