如果你经常使用搜索功能，那么你应该知道搜索结果往往呈现在一个列表中。这个列表是如何生成的呢？
一种常见的方法是使用开源库 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 引进来：
var lunr = require('lunr'); var ResultsRender = require('lunr-results-render');
这样，我们就完成了 lunr 和 lunr-results-render 的引用。
接下来，我们需要将搜索结果转换成一个 JSON 数据，并将其赋值给一个变量。这个 JSON 数据的格式可以参考 lunr 官方文档。
-- -------------------- ---- ------- --- ----------- - ------------- -- - -------------------- ------------------- ------------------ ------ ------- ------- ----- --- ----- ---- ----- --- --- --- ---------- - ----------------------------展开代码
现在，我们已经得到了搜索结果的 JSON 数据，接下来就是用 lunr-results-render 将其渲染成一份列表。
var render = ResultsRender({ container: '#search-results', template: '<h3><a href="{{ref}}">{{title}}</a></h3>' }); render(searchData);
这段代码中，我们指定了搜索结果的容器和模板。
最后一步，我们需要在 HTML 中添加样式，让搜索结果更加美观：
-- -------------------- ---- ------- ----------------- - ----------- ----- -------- -- - ----------------- - -- - -------------- ----- -------------- --- ----- ----- - ----------------- - ------------- - -------------- ----- - ----------------- - -- - - -------- ------ ---------------- ----- - ----------------- - -- ------- - ------ -------- -展开代码
这样，我们就完成了搜索结果的渲染。具体效果可见下面的截图：
自定义样式
如果你不喜欢默认的搜索结果样式，那么你可以自定义它。让我们来看一下如何自定义样式。
首先，你需要在 JavaScript 文件中指定自己的模板。默认的模板如下所示：
-- -------------------- ---- ------- --- --------------- - - ---- ------------------------- ------------- - ------ - ------ ----------------------------------- - ------------ - ------- ------------- ------- -------------展开代码
如果你想要自定义模板，只需要编写一个新的字符串即可。下面是一个简单的例子：
-- -------------------- ---- ------- --- ---------- - - ---- ---------------------------- ------------- - ------ - ------ ----------------------------------- - ------------------- - ----- ---------------------------------------- - ------- ------------- ------- -------------展开代码
在这段代码中，我们将样式名改成了 my-search-results，并在搜索结果中添加了一个时间戳。
接着，我们需要将这个模板传递给 lunr-results-render：
var render = ResultsRender({ container: '#search-results', template: myTemplate }); render(searchData);
这样，我们就完成了样式的自定义。
总结
在本文中，我们学习了如何使用 npm 包 lunr-results-render。通过这个包，你可以轻松地将 lunr 输出的 JSON 数据渲染成一个样式良好的搜索结果列表。
如果你想要更深入地了解 lunr，可以阅读官方文档。同时，你也可以通过自己的实践来迅速掌握这个库。
希望本文能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78080
