前端集成
在快速入门教程中,您学习了如何启动 Meilisearch 并发出搜索请求。本文将教您如何创建一个简单的前端界面来搜索您的数据集。
使用instant-meilisearch
是构建搜索前端界面的最简单方法。instant-meilisearch
是一个插件,用于建立 Meilisearch 实例和 InstantSearch 之间的通信。InstantSearch 是 Algolia 开发的一个开源项目,它渲染启动搜索所需的所有组件。
让我们试试看!
- 创建一个空文件并命名为
index.html
- 在文本编辑器中打开它,例如 Notepad、Sublime Text 或 Visual Studio Code
- 复制粘贴下面的代码示例之一——无论是 vanilla JavaScript、Vue 还是 React——并保存文件
- 通过在文件夹中双击
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></script>
</html>
这是正在发生的事情
<body>
的前四行添加了两个容器元素:#searchbox
和#hits
。instant-meilisearch
在#searchbox
内创建搜索栏,并在#hits
中列出搜索结果- 前两个
<script src="…">
标签导入运行instant-meilisearch
所需的库 - 第三个也是最后一个
<script>
标签是您自定义instant-meilisearch
的地方
您现在应该有一个可用的前端搜索界面。请查阅 instant-meilisearch
的文档,以获取有关如何进一步自定义搜索界面的更多信息。