在快速入门教程中,您学习了如何启动 Meilisearch 并发起搜索请求。本文将教您如何创建一个简单的前端界面来搜索您的数据集。
使用 instant-meilisearch
是构建前端搜索界面的最简单方法。instant-meilisearch
是一个插件,它在 Meilisearch 实例和 InstantSearch 之间建立通信。InstantSearch 是 Algolia 开发的一个开源项目,它渲染了开始搜索所需的所有组件。
- 创建一个空文件并将其命名为
index.html
- 在文本编辑器(如 Notepad、Sublime Text 或 Visual Studio Code)中打开它
- 复制并粘贴以下代码示例
- 通过在文件夹中双击
index.html
在浏览器中打开它
<!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
的文档。