fuse.js前端搜索简单使用的三个案例

2024 年 03 月 23 日

61 次浏览

2933字数

Fuse.js 是一个轻量级的前端库，主要用于提供模糊搜索的功能。它非常灵活，易于集成，并且对搜索的结果可以进行配置和权重的调整。在打造用户友好的搜索体验时，Fuse.js 是前端开发者的优选。以下是三个简单的使用案例，展示如何将 Fuse.js 应用于不同的搜索需求中。

1. 基本文本搜索

假设有一个静态网站，我们希望能够允许用户在一个简单的文章数组中进行搜索。以下是使用 Fuse.js 实现该功能的基本步骤。

HTML:

<input type="text" id="search" placeholder="输入搜索关键字..."/>
<div id="result"></div>

JavaScript:

// 数据数组
const articles = [
  { title: '文章一', content: '这是第一个测试文章的内容' },
  { title: '文章二', content: '第二个测试文章的内容很丰富' },
  // ... 更多文章
];

// Fuse.js 配置项
const options = {
  includeScore: true,
  // 定义搜索的键
  keys: ['title', 'content']
};

// 初始化 Fuse 实例
const fuse = new Fuse(articles, options);

// 绑定键盘输入事件监听
document.getElementById('search').addEventListener('input', function(e) {
  const result = fuse.search(e.target.value);
  document.getElementById('result').innerHTML = result.map(item => item.item.title).join('<br>');
});

在上述代码中，HTML 部分提供了一个输入框，用户可以在其中输入搜索关键词。JavaScript 部分则创建了一个数据数组 articles，并且初始化了一个 Fuse 实例，配置好搜索的键和其他选项。最后，监听输入框的内容变化，调用 fuse.search 方法来执行搜索，将搜索结果显示到结果区域。

2. 高级配置搜索

在较为复杂的搜索需求中，我们可能需要对搜索结果的精确度和相关性进行调整。Fuse.js 提供了高级的配置选项来满足这类需求。

JavaScript:

// 假设 articles 数据与第一个案例相同

// 高级配置项
const advancedOptions = {
  isCaseSensitive: false,
  includeScore: true,
  threshold: 0.4, // 0 表示完全匹配，1 表示不匹配
  keys: [
    {
      name: 'title',
      weight: 0.7 // 更高的权重表明该字段在搜索中更为重要
    },
    {
      name: 'content',
      weight: 0.3
    }
  ]
};

// ... 其余代码与第一个案例相似

在这个例子中，我们新增了 isCaseSensitive 和 threshold 选项，分别用来设置搜索是否区分大小写和设置匹配的阈值。另外通过 keys 中的 weight 属性为每个搜索键指定权重，来影响搜索结果的排名。

3. 实时搜索建议

实时搜索建议可以提高用户的搜索效率，Fuse.js 可以轻松实现这一功能。

HTML:

<input type="text" id="search" placeholder="输入搜索关键字..." />
<ul id="suggestions"></ul>

JavaScript:

// 假设 articles 数据与第一个案例相同

// 标准配置项
const options = {
  includeScore: true,
  keys: ['title', 'content']
};

// 初始化 Fuse 实例
const fuse = new Fuse(articles, options);

// 绑定键盘输入事件监听
document.getElementById('search').addEventListener('input', function(e) {
  const result = fuse.search(e.target.value);
  const suggestions = result.map(item =>
    `<li>${item.item.title}</li>`
  ).join('');
  document.getElementById('suggestions').innerHTML = suggestions;
});

这里我们将搜索结果呈现为一个未排序列表，会随着用户输入的每个键盘字符而更新搜索结果。

通过这三个例子可以看出，Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能，无论是简单的列表搜索还是实时的搜索建议，都能够高效、精确地提供给用户所需的信息。