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

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

  1. 创建一个空文件并命名为index.html
  2. 用文本编辑器（如记事本、Sublime Text或Visual Studio Code）打开它
  3. 复制粘贴下方的代码示例
  4. 在浏览器中双击文件夹中的index.html文件打开它
<!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(
        "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文档获取更多关于如何进一步自定义搜索界面的信息。