使用ElasticLunr.js进行客户端搜索

任何博客或文档网站都需要搜索功能。 您可以通过多种方式实现这一目标，并且很可能会选择服务器端解决方案。 但是，如果您不想处理任何后端，则可以通过lunr.js在客户端实现所有后端。

几年前，我首次发现Lunr.js，但自从我决定使用服务器端选项（我还需要插入动态内容）以来，我就没有使用它。 但是，几周前，我决定采用客户端方法，我发现ElasticLunr.JS本质上是对Lunr.js的包装，可以使事情变得更容易。

汤姆和杰里–休战创伤，威廉·汉娜和约瑟夫·巴贝拉

创建索引非常简单（由ElasticLunr.com提供）：

搜索很简单，如下所示：

如果您有一个像这样的Jekyll博客，则可以使用Liquid语法对所有帖子进行索引。 这是我为该博客创建索引的方式。

现在，对于实际的搜索，我需要一个“前端”，一个搜索小部件。 由于ElasticLunr.js不提供此类工具，因此我编写了自己的工具。 好吧，实际上我不是从头开始创建它，而是重构了用于服务器端搜索的现有Search Widget。 而且，在进行重构的过程中，我了解了“老化软件”的实际含义。 这是一个简单的ReactJS小部件，大约有5个组件，并且只有很少的依赖项：经过3年根本没有使用它，运行npm install突然显示大约400（！）警告和错误。 我给项目留了一个绿色的构建标记，当我回到项目上时，什么也不做，它突然爆炸了。

为什么我取消服务器端搜索？ 过去对我来说效果很好，我什至编写了自己的Github聊天机器人来索引和搜索Github Pages内容。 我拒绝了它，因为保持它变得昂贵（我认为我在所有云提供商上都没有免费套餐），此外，该产品未能吸引用户。

总之，如果您有类似的用例，强烈建议您研究lunr.js和/或elasticlunr.js。 另外，您可以重用我的搜索小部件！

翻译自: https://www.javacodegeeks.com/2020/02/clientside-search-with-elasticlunr-js.html