搜索是任何网站或应用程序的必备工具。一个简单的搜索小部件可以让用户梳理您的整个博客。或者允许客户浏览您的库存。建立自定义照片库？添加搜索框。各种第三方供应商都提供网站搜索功能。或者，您可以采用 DIY 方法并构建整个后端来应答搜索 API 调用。

Lunr.js 通过 Javascript 在客户端运行。Lunr 不会向后端发送调用，而是在客户端本身构建的索引中查找搜索词。这避免了浏览器和服务器之间昂贵的来回网络调用。网上有很多教程可以展示 Lunr 的网站搜索功能。但是您实际上可以使用 Lunr.js 来搜索任何 Javascript 对象数组。

在本指南中，我为有史以来排名前 100 的书籍建立了搜索索引 。之后，我将向您展示如何预先构建索引以加快索引速度。我还将向您展示如何充分利用 Lunr 的搜索选项。

创建一个名为 的新 HTML 页面。我在整个指南中都使用这个文件。在 顶部，调用主 Lunr JS 库。

接下来，创建一个名为 的变量。此变量将包含主数据集的 JSON 化字符串。在标签内 定义变量。

我需要将此数据解析为 JSON，以便 Javascript 可以处理它。

为确保加载过程成功，我将遍历 JSON 数据集并打印每个条目。您应该在控制台日志中看到以下内容。

建立搜索索引

现在我将在使用该函数调用的变量中构建搜索索引。这一步需要三件事：

我现在可以调用该函数来构建搜索索引。

如果浏览器的控制台日志中没有错误，则索引构建成功。接下来，我将带它去试驾。

首先，我想看看有没有包含这个词的文件：

我应该在控制台日志中看到以下内容：

好吧。所以有一个文档与搜索查询匹配。但是如何显示呢？

正如我之前提到的，Lunr 返回匹配文档的引用。但不是文档本身。意思是如果我打印，我会看到以下内容。

这里包含一个具有单个元素的对象数组。该元素的字段包含一个值。这是因为我使用该字段作为参考。要显示完整的文档，我需要加倍努力。

在上面的代码中，我使用函数迭代结果。然后我在结果集中查找所有引用的文档。所以包含完整的搜索结果。

现在，我重复搜索关键字。代码如下。

结果是：

就这么简单！添加对任何 JSON 对象数组的搜索只需要五个简单的步骤：

您可能已经注意到，在每次页面刷新时构建搜索索引都需要一些时间。时间现在可能难以察觉。但它不会是在远程服务器上的时候。Lunr 允许 预先构建搜索索引 以使搜索更具响应性。

有两种预构建索引的方法。第一种方法是在建立索引后对其进行序列化。由于我已经在教程中创建了索引，所以我使用这种方法。

然后我会用序列化的字符串替换。索引加载命令也会改变。