如果你经常使用搜索功能，那么你应该知道搜索结果往往呈现在一个列表中。这个列表是如何生成的呢？
一种常见的方法是使用开源库 lunr.js。它是一个 JavaScript 实现的全文搜索引擎，可以帮助你将搜索结果生成成一个 JSON 数据，但它本身并不提供任何用于呈现搜索结果的方法。
这时就需要使用一个称为 lunr-results-render 的 npm 包。它是一个轻量级的库，可以帮助你快速轻松地将 JSON 数据转换成样式良好的搜索结果列表，而且支持自定义模板。
接下来，我将为你详细介绍如何使用 lunr-results-render。
安装
首先，在你的项目目录下打开终端，并输入以下命令进行安装：
npm install lunr-results-render --save
安装成功后，你就可以使用 lunr-results-render。
基本使用
现在，让我们看一看如何使用 lunr-results-render 来创建一个简单的搜索结果列表。
首先，在你的 HTML 文件中添加一个用于展示搜索结果的容器：
<div id="search-results"></div>
接着，创建一个 JavaScript 文件，并先将 lunr 和 lunr-results-render 引进来：
--- ---- - ---------------- --- ------------- - -------------------------------
这样，我们就完成了 lunr 和 lunr-results-render 的引用。
接下来，我们需要将搜索结果转换成一个 JSON 数据，并将其赋值给一个变量。这个 JSON 数据的格式可以参考 lunr 官方文档。
--- ----------- - ------------- -- -
--------------------
-------------------
------------------
------ ------- -------
----- --- ----- ---- -----
---
---
--- ---------- - ----------------------------现在，我们已经得到了搜索结果的 JSON 数据，接下来就是用 lunr-results-render 将其渲染成一份列表。
--- ------ - --------------- ---------- ------------------ --------- ------- ---------------------------------- --- -------------------
这段代码中，我们指定了搜索结果的容器和模板。
最后一步，我们需要在 HTML 中添加样式，让搜索结果更加美观：
----------------- - ----------- ----- -------- -- - ----------------- - -- - -------------- ----- -------------- --- ----- ----- - ----------------- - ------------- - -------------- ----- - ----------------- - -- - - -------- ------ ---------------- ----- - ----------------- - -- ------- - ------ -------- -
这样，我们就完成了搜索结果的渲染。具体效果可见下面的截图：
自定义样式
如果你不喜欢默认的搜索结果样式，那么你可以自定义它。让我们来看一下如何自定义样式。
首先，你需要在 JavaScript 文件中指定自己的模板。默认的模板如下所示：
--- --------------- - - ---- ------------------------- ------------- - ------ - ------ ----------------------------------- - ------------ - ------- ------------- ------- -------------
如果你想要自定义模板，只需要编写一个新的字符串即可。下面是一个简单的例子：
--- ---------- - - ---- ---------------------------- ------------- - ------ - ------ ----------------------------------- - ------------------- - ----- ---------------------------------------- - ------- ------------- ------- -------------
在这段代码中，我们将样式名改成了 my-search-results，并在搜索结果中添加了一个时间戳。
接着，我们需要将这个模板传递给 lunr-results-render：
--- ------ - --------------- ---------- ------------------ --------- ---------- --- -------------------
这样，我们就完成了样式的自定义。
总结
在本文中，我们学习了如何使用 npm 包 lunr-results-render。通过这个包，你可以轻松地将 lunr 输出的 JSON 数据渲染成一个样式良好的搜索结果列表。
如果你想要更深入地了解 lunr，可以阅读官方文档。同时，你也可以通过自己的实践来迅速掌握这个库。
希望本文能对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/78080