meilisearch docsearch

meilisearch-docsearch

Компонент быстрого поиска для meilisearch, вдохновленный algolia/docsearch.

Скриншоты

свет	темный

Использование через NPM (рекомендуется)

Установка

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

Javascript

Для начала вам понадобится контейнер для вашего компонента DocSearch . Если у вас его еще нет, вы можете вставить его в свою разметку:

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

Затем вставьте в него DocSearch , вызвав функцию docsearch и предоставив контейнер. Это может быть CSS-селектор или элемент.

Обязательно укажите container (например, div ), а не input . DocSearch создает для вас полностью доступное окно поиска.

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

Стиль

Все стили включены в комплект как:

• Один большой файл:

  •  import "meilisearch-docsearch/css" ;

• Отдельные небольшие файлы:

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

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

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

SolidJS

Если вы используете solid-js , вы можете напрямую импортировать компонент DocSearch , который создаст для вас полностью доступное окно поиска.

 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 ;

Использование через CDN

Пакет также содержит пакет браузера и необходимые стили, которые можно загрузить через CDN, например unpkg.com:

1. добавить контейнер

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

2. импортируйте пакет браузера js и инициализируйте компонент

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

   альтернативно вы можете импортировать модуль ESM при использовании <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. импортировать стили

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

Благодарность

Этот проект вдохновлен algolia/docsearch и meilisearch/docs-searchbar.js

ЛИЦЕНЗИЯ

MIT или MIT/Apache 2.0, если применимо.