前往首頁v1.12文件

    前端整合

    在快速入門教學中，您學習了如何啟動 Meilisearch 並發出搜尋請求。本文將教您如何建立一個簡單的前端介面來搜尋您的資料集。

    使用 instant-meilisearch 是為搜尋建立前端介面最簡單的方式。instant-meilisearch 是一個外掛程式，用於建立 Meilisearch 實例與 InstantSearch之間的通訊。InstantSearch 是由 Algolia 開發的開源專案，它會呈現開始搜尋所需的所有元件。

    試試看！
    1. 建立一個空檔案，並將其命名為 index.html
    2. 在文字編輯器（如記事本、Sublime Text 或 Visual Studio Code）中開啟它
    3. 複製貼上上述程式碼範例之一 — Vanilla JavaScript、Vue 2 或 React — 並儲存檔案
    4. 在您的資料夾中雙擊 index.html，在瀏覽器中開啟它

    以下程式碼範例使用純 JavaScript。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
  </head>
  <body>
    <div class="wrapper">
      <div id="searchbox" focus></div>
      <div id="hits"></div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
  <script>
    const search = instantsearch({
      indexName: "movies",
      searchClient: instantMeiliSearch(
        "https://127.0.0.1:7700"
      ).searchClient
      });
      search.addWidgets([
        instantsearch.widgets.searchBox({
          container: "#searchbox"
        }),
        instantsearch.widgets.configure({ hitsPerPage: 8 }),
        instantsearch.widgets.hits({
          container: "#hits",
          templates: {
          item: `
            <div>
            <div class="hit-name">
                  {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
            </div>
            </div>
          `
          }
        })
      ]);
      search.start();
  </script>
</html>

    以下是發生的情況

    • <body> 的前四行會新增兩個容器元素：#searchbox 和 #hits。instant-meilisearch 會在 #searchbox 內建立搜尋列，並在 #hits 中列出搜尋結果
    • 前兩個 <script src="…"> 標籤會匯入執行 instant-meilisearch 所需的程式庫
    • 第三個也是最後一個 <script> 標籤是您自訂 instant-meilisearch 的地方

    您現在應該有一個可運作的前端搜尋介面。請參閱 instant-meilisearch 的文件，以取得更多關於如何進一步自訂您的搜尋介面的資訊。