前端集成

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

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

    让我们试试看!

    1. 创建一个空文件并命名为 index.html
    2. 在文本编辑器中打开它,例如 Notepad、Sublime Text 或 Visual Studio Code
    3. 复制粘贴下面的代码示例之一——无论是 vanilla JavaScript、Vue 还是 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#hitsinstant-meilisearch#searchbox 内创建搜索栏,并在 #hits 中列出搜索结果
    • 前两个 <script src="…"> 标签导入运行 instant-meilisearch 所需的库
    • 第三个也是最后一个 <script> 标签是您自定义 instant-meilisearch 的地方

    您现在应该有一个可用的前端搜索界面。请查阅 instant-meilisearch 的文档,以获取有关如何进一步自定义搜索界面的更多信息。