在前端开发中，搜索功能是一个很重要的组成部分。而 lunr.js 则是一个很好的搜索库，它可以使用 JSON 格式的数据进行索引和搜索，支持多种语言，并且不需要后端的支持。不过使用纯 lunr.js 开发搜索功能还是有点麻烦，需要手动编写代码，并处理一些 UI 相关的逻辑。针对这一点，lunr-widgets 包可以帮助我们快速搭建搜索界面，并提供更好的搜索体验。
安装
安装 lunr-widgets 是通过 npm 安装，使用 npm 5.2+ 版本推荐使用以下方式：
--- ------- ------------
使用
数据格式
在使用 lunr-widgets 之前我们要准备数据，数据需要是以下格式的 JSON 数组：
----- ---- - - ---- -- ------ ------ ------- -------- ----- -- -- ----- ------- ---- -- ------ ---------- -------- -- ------ --------- ------ --------- -- --- --
其中 id 必须为数字类型，而 title 和 content 是字符串类型，表示标题和内容。数据格式准备好之后就可以开始使用了。
初始化
lunr-widgets 可以很方便地集成到你的应用程序中。下一步将展示如何使用 lunr-widgets 创建一个带有搜索框的搜索组件，你可以将其放置到你的任何一个页面。 首先，我们要引入 lunr-widgets 包。我们使用 ES6 中的 import 语句引入，如果你使用的是其他模块化方案，也可以根据情况修改引入方式。
------ - ------ ------- ------ ----- - ---- ---------------
索引
在页面中我们需要首先创建索引，我们可以使用 lunr-widgets 中的 index 函数来创建一个搜索索引，示例代码如下：
----- --- - ----------- - ------- --------- ---------- ---
上面的代码创建了一个搜索索引，它包含了 data 数组中的所有元素，并搜索 title 和 content 两个字段。在实际使用中，你可以根据需要自定义所需字段。
搜索框
在页面上添加一个输入框，并通过 lunr-widgets 创建一个输入框实例。示例代码如下：
------ ------------- ----------------- ----------------------
----- ----------- - -----------------------------------------------
搜索
编写一个搜索函数对数据进行搜索，并将搜索结果展示在页面上。示例代码如下：
-------- -------------------- -
----- ------- - ------------------
------------------- -------- -
--------- ---------------
-------------- --------------
---
-上面的代码主要完成三个步骤。首先，我们使用搜索索引 idx 对 query 进行搜索，并得到搜索结果 results。然后，我们将搜索结果通过 lunr-widgets 的 search 函数展示在页面中，展示效果可以通过 template 配置项进行自定义，它是一个字符串类型的模板。最后 emptyTemplate 是搜索结果为空时的模板。
下面是一个展示搜索结果的 template 示例：
------- ---------------- -----------------
---- ---------------
--- ---------------- ----- -------
---- ------------------ ------- --------
------
---------清除搜索
最后我们需要添加一个清除搜索按钮，使得用户可以清除当前的搜索结果。示例代码如下：
----- ----------- - ----------------------------------------------- ------------------------------------- -- -- - ------------------- ---
上面的代码使用 lunr-widgets 中的 clear 函数创建了一个清除搜索结果的按钮，并给按钮添加了一个点击事件。当用户点击清除搜索按钮时，我们调用 clear 函数清楚当前搜索结果。
总结
通过本文，我们快速了解了如何使用 lunr-widgets 包使用 lunr.js 实现前端搜索功能，我们可以使用这个库来构建自己的搜索策略。这个库提供了很多基础的搜索功能，可以快速集成到我们的应用程序中，大大提高了开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ad581e8991b448d8723