npm 包 lunr-widgets 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，搜索功能是一个很重要的组成部分。而 lunr.js 则是一个很好的搜索库，它可以使用 JSON 格式的数据进行索引和搜索，支持多种语言，并且不需要后端的支持。不过使用纯 lunr.js 开发搜索功能还是有点麻烦，需要手动编写代码，并处理一些 UI 相关的逻辑。针对这一点，lunr-widgets 包可以帮助我们快速搭建搜索界面，并提供更好的搜索体验。

安装

安装 lunr-widgets 是通过 npm 安装，使用 npm 5.2+ 版本推荐使用以下方式：

npm install lunr-widgets

使用

数据格式

在使用 lunr-widgets 之前我们要准备数据，数据需要是以下格式的 JSON 数组：

const data = [
  {id: 1, title: 'Hello World', content: 'This is my first post'},
  {id: 2, title: 'Lunr.js', content: 'A simple full-text search engine'},
  // ...
];

其中 id 必须为数字类型，而 title 和 content 是字符串类型，表示标题和内容。数据格式准备好之后就可以开始使用了。

初始化

lunr-widgets 可以很方便地集成到你的应用程序中。下一步将展示如何使用 lunr-widgets 创建一个带有搜索框的搜索组件，你可以将其放置到你的任何一个页面。首先，我们要引入 lunr-widgets 包。我们使用 ES6 中的 import 语句引入，如果你使用的是其他模块化方案，也可以根据情况修改引入方式。

import { index, search, input, clear } from 'lunr-widgets';

索引

在页面中我们需要首先创建索引，我们可以使用 lunr-widgets 中的 index 函数来创建一个搜索索引，示例代码如下：

const idx = index(data, { fields: ['title', 'content'] });

上面的代码创建了一个搜索索引，它包含了 data 数组中的所有元素，并搜索 title 和 content 两个字段。在实际使用中，你可以根据需要自定义所需字段。

搜索框

在页面上添加一个输入框，并通过 lunr-widgets 创建一个输入框实例。示例代码如下：

<input type="search" id="search-input" placeholder="输入关键词搜索">

const searchInput = input(document.getElementById('search-input'));

搜索

编写一个搜索函数对数据进行搜索，并将搜索结果展示在页面上。示例代码如下：

function performSearch(query) {
  const results = idx.search(query);
  search(searchInput, results, {
    template: resultItemTmpl,
    emptyTemplate: noResultsTmpl,
  });
}

上面的代码主要完成三个步骤。首先，我们使用搜索索引 idx 对 query 进行搜索，并得到搜索结果 results。然后，我们将搜索结果通过 lunr-widgets 的 search 函数展示在页面中，展示效果可以通过 template 配置项进行自定义，它是一个字符串类型的模板。最后 emptyTemplate 是搜索结果为空时的模板。

下面是一个展示搜索结果的 template 示例：

<script type="text/html" id="result-item">
  <div class="result">
    <h3 class="title">{{ title }}</h3>
    <div class="content">{{ content }}</div>
  </div>
</script>

清除搜索

最后我们需要添加一个清除搜索按钮，使得用户可以清除当前的搜索结果。示例代码如下：

const clearButton = clear(document.getElementById('clear-button'));

clearButton.addEventListener('click', () => {
  clear(searchInput);
});

上面的代码使用 lunr-widgets 中的 clear 函数创建了一个清除搜索结果的按钮，并给按钮添加了一个点击事件。当用户点击清除搜索按钮时，我们调用 clear 函数清楚当前搜索结果。

总结

通过本文，我们快速了解了如何使用 lunr-widgets 包使用 lunr.js 实现前端搜索功能，我们可以使用这个库来构建自己的搜索策略。这个库提供了很多基础的搜索功能，可以快速集成到我们的应用程序中，大大提高了开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ad581e8991b448d8723