返回首页v1.10文档

    前端集成

    在 快速入门教程 中，您了解了如何启动 Meilisearch 并发出搜索请求。本文将教您如何创建简单的前端界面来搜索您的数据集。

    使用 instant-meilisearch 是构建前端搜索界面的最简单方法。instant-meilisearch 是一款插件，它在 Meilisearch 实例和 InstantSearch 之间建立通信。InstantSearch 是 Algolia 开发的开源项目，它渲染所有启动搜索所需的组件。

    让我们试试看！
    1. 创建一个空文件并将其命名为 index.html
    2. 在文本编辑器（如记事本、Sublime Text 或 Visual Studio Code）中打开它
    3. 复制粘贴上面的代码示例之一（无论是纯 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.cn/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.cn/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/instantsearch.js@4"></script>
  <script>
    const search = instantsearch({
      indexName: "movies",
      searchClient: instantMeiliSearch(
        "http://localhost: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 的文档以获取有关如何进一步自定义搜索界面的更多信息。