在前端开发中，我们经常需要根据HTML元素的自定义data属性值来查找和过滤元素。这可能涉及简单的精确匹配，也可能需要复杂的模糊搜索，例如忽略大小写、处理重音字符或查找部分匹配项。本教程将深入探讨如何使用jQuery和外部库来实现这些搜索功能。
一、精确匹配 data 属性值
当我们需要根据data属性的完整、准确值来查找元素时，jQuery的属性选择器是最直接有效的方法。例如，要查找data-search属性值为"A-plus"的元素，直接使用[data-search="A-plus"]即可。
以下是一个实现精确搜索的示例：
精确Data属性搜索
- #À plus !
- #B minus !
result:
代码解析：
立即学习“前端免费学习笔记（深入）”；
- $(${elemSelector}[data-search="${searchText}"])：这是核心的精确匹配部分。它构建了一个选择器，例如".items[data-search="A-plus"]"，直接定位data-search属性值完全等于searchText的元素。
- find.length：检查是否找到了匹配的元素。
- find.clone()：为了避免直接移动原始DOM元素，我们返回其克隆副本，这样原始列表结构不受影响。
这种方法适用于当data属性值是固定且需要完全匹配的场景。然而，它无法处理部分匹配、拼写错误或重音字符（例如搜索"A-plus"时，无法找到data-search="A-plus"但显示文本为#À plus !的元素，因为它只匹配data-search的值）。
二、实现灵活的模糊搜索
对于更高级的搜索需求，例如模糊匹配、部分匹配、忽略重音符号或处理轻微的拼写错误，原生的jQuery选择器功能有限。在这种情况下，引入专门的模糊搜索库是最佳实践。Fuse.js和List.js是两个流行的选择，它们提供了强大的客户端模糊搜索能力。
本节将以Fuse.js为例，详细讲解如何集成并使用它来实现灵活的模糊搜索。
2.1 引入 Fuse.js
首先，在HTML文件中引入Fuse.js库。你可以通过CDN方式引入：
2.2 构建搜索数据源
Fuse.js需要一个数据数组作为其搜索的基础。我们需要遍历页面上所有待搜索的元素，提取出它们的相关信息（例如data-search属性值），并构建成一个适合Fuse.js处理的JavaScript对象数组。同时，为了在搜索结果中方便地展示原始元素，我们可以将元素的克隆副本也存储起来。
const searchList = []; // 用于存储Fuse.js的数据源
// 遍历所有待搜索的.items元素
$('.items').each(function() {
searchList.push({
title: $(this).data('search'), // 提取data-search属性作为搜索关键字
el: $(this).clone() // 存储元素的克隆副本，用于结果展示
});
});2.3 初始化 Fuse.js 实例
接下来，使用构建好的数据源和配置选项来初始化Fuse.js。
const fuse = new Fuse(searchList, {
shouldSort: false, // 是否对结果进行排序，默认为true
threshold: 0.5, // 匹配的模糊程度，0为精确匹配，1为完全模糊匹配
keys: ['title'] // 指定在数据对象中哪个属性进行搜索
});配置选项说明：
- shouldSort: 如果设置为true，Fuse.js会根据匹配得分对结果进行排序。
- threshold: 这是一个0到1之间的数值，表示匹配的模糊程度。0表示精确匹配（与data-search="value"类似），1表示完全模糊匹配。0.5是一个常用的折中值，允许一定的模糊性但仍保持相关性。
- keys: 一个字符串数组，指定searchList中哪些属性应该被Fuse.js搜索。在这里，我们指定`title
