在前端开发中，我们经常需要根据html元素的自定义数据属性（data-*）来查找或过滤元素。这对于构建交互式界面、实现搜索功能或数据过滤等场景至关重要。本文将详细介绍两种主要的查找方式：精确匹配和模糊搜索。
一、精确匹配 data-attr 属性值
当我们需要根据 data-attr 属性的完整、准确值来查找元素时，可以使用jQuery的选择器来实现精确匹配。这种方法简单直接，适用于已知完整搜索词的场景。
1.1 精确匹配原理
jQuery提供了一种强大的属性选择器 [attribute="value"]，可以直接匹配指定属性具有特定值的元素。对于 data-* 属性，我们可以将其视为普通属性进行匹配。例如，要查找 data-search="A-plus" 的元素，可以使用 [data-search="A-plus"]。
1.2 示例代码
以下代码展示了如何实现一个基于 data-search 属性的精确查找功能。当用户在输入框中输入内容时，系统会立即查找并显示匹配的元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>精确匹配 data-attr 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>请输入精确的搜索词 (例如: A-plus):</p>
<input class="searcher" type="text" placeholder="输入搜索词">
<h3>数据列表:</h3>
<ul>
<li class="items" data-search="A-plus">#À plus !</li>
<li class="items" data-search="B-minus">#B minus !</li>
<li class="items" data-search="C-equal">#C equal !</li>
</ul>
<h3>搜索结果:</h3>
<div class="result"></div>
<script>
/**
* 根据 data-search 属性值精确查找元素
* @param {string} elemSelector - 待查找元素的CSS选择器，例如 '.items'
* @param {string} searchText - 要精确匹配的文本
* @returns {jQuery|string} - 匹配到的元素的jQuery对象副本，如果未找到则返回 '<i>Not found!</i>'
*/
function findElementByText(elemSelector, searchText) {
// 使用属性选择器进行精确匹配
const find = $(`${elemSelector}[data-search="${searchText}"]`);
if (find.length) {
// 如果找到，返回元素的副本，避免直接操作原始DOM
return find.clone();
}
// 未找到则返回提示信息
return '<i>未找到!</i>';
}
// 监听输入框的 'input' 事件，实时进行搜索
$(document).on('input', '.searcher', function() {
const searchTerm = $(this).val().trim(); // 获取输入值并去除首尾空格
// 调用查找函数并将结果渲染到 .result 区域
$('.result').html( findElementByText( '.items', searchTerm ) );
});
</script>
</body>
</html>1.3 注意事项
- 大小写敏感性： 默认情况下，[attribute="value"] 选择器是大小写敏感的。如果需要不区分大小写，可能需要先将属性值和搜索词都转换为统一大小写（例如，都转为小写），但这会增加代码复杂性，通常建议在数据源层面保持一致性。
- 完整匹配： 这种方法要求搜索词与 data-search 属性的值完全一致。例如，搜索 "A" 将不会匹配到 data-search="A-plus"。
二、实现 data-attr 属性值的模糊搜索
在许多场景下，用户可能不记得完整的或精确的搜索词，或者希望通过部分匹配、忽略特殊字符等方式进行搜索。这时，模糊搜索就显得尤为重要。jQuery的 :contains() 选择器虽然可以进行文本内容模糊匹配，但它主要针对元素内部的文本节点，而不是 data-attr 属性的值，并且在处理复杂模糊逻辑（如容错、加权）时能力有限。因此，对于 data-attr 的模糊搜索，我们通常会借助专业的第三方库。
立即学习“前端免费学习笔记（深入）”；
2.1 为什么不直接使用 :contains 针对 data-attr？
$(selector:contains(text)) 主要用于查找包含指定文本内容的元素。如果尝试 $('li[data-search]:contains("A")')，它会查找 <li> 元素内部文本包含 "A" 的，而不是 data-search 属性值包含 "A" 的。虽然可以通过遍历元素并获取 data-search 属性值进行字符串 indexOf 或正则表达式匹配，但这会增加性能开销，并且难以实现复杂的模糊匹配算法。
2.2 使用 Fuse.js 实现模糊搜索
Fuse.js 是一个轻量级、功能强大的模糊搜索库，它提供了高度可配置的模糊匹配算法，支持对对象数组进行搜索，非常适合我们对 data-attr 值进行模糊搜索的需求。
2.2.1 Fuse.js 核心概念
- 数据源： Fuse.js 接受一个对象数组作为数据源。我们需要将每个 <li> 元素的 data-search 值提取出来，并结合原始元素本身，构建成一个适合 Fuse.js 处理的数组。
-
配置选项： Fuse.js 提供了丰富的配置选项，例如：
- keys: 指定在对象中哪些属性需要参与搜索。
- threshold: 模糊匹配的阈值，0表示精确匹配，1表示完全不匹配，值越大容错性越高。
- shouldSort: 是否对结果进行排序。
- 搜索方法： fuse.search(searchTerm) 方法会返回一个包含匹配结果的数组。每个结果都包含 item（原始数据对象）和 score（匹配得分）。
2.2.2 示例代码
以下示例展示了如何使用 Fuse.js 对 data-search 属性进行模糊搜索。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Fuse.js 模糊搜索 data-attr 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入 Fuse.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js"></script>
</head>
<body>
<p>请输入模糊的搜索词 (例如: A, plus, minus):</p>
<input class="searcher" type="text" placeholder="输入搜索词">
<h3>数据列表:</h3>
<ul>
<li class="items" data-search="A-plus">#À plus !</li>
<li class="items" data-search="A-minus">#À minus !</li>
<li class="items" data-search="B-plus">#B plus !</li>
<li class="items" data-search="C-equal">#C equal !</li>
</ul>
<h3>搜索结果:</h3>
<ul class="result"></ul>
<script>
const list = []; // 用于存储 Fuse.js 的数据源
// 遍历所有 .items 元素，构建 Fuse.js 需要的数据结构
$('.items').each(function() {
list.push({
title: $(this).data('search'), // 将 data-search 的值作为搜索键
el: $(this).clone() // 存储原始元素的副本，以便后续渲染
});
});
// 初始化 Fuse.js
const fuse = new Fuse(list, {
shouldSort: false, // 不对结果进行排序，按匹配度默认排序
threshold: 0.5, // 模糊匹配阈值，值越小越精确，值越大容错性越高
keys: ['title'] // 指定搜索的键为 'title' (即 data-search 的值)
});
// 监听输入框的 'input' 事件
$(document).on('input', '.searcher', function() {
const searchTerm = $(this).val().trim(); // 获取输入值
const results = fuse.search(searchTerm); // 执行模糊搜索
$('.result').html(''); // 清空之前的搜索结果
if (results.length) {
// 如果有匹配结果，遍历并添加到 .result 区域
results.map(o => $('.result').append(o.item.el));
} else {
// 未找到则显示提示信息
$('.result').html('<i>未找到!</i>');
}
});
</script>
</body>
</html>2.2.3 代码解析
- 数据准备： 首先，我们遍历所有具有 class="items" 的 <li> 元素。对于每个元素，我们创建一个包含 title (即 data-search 的值) 和 el (原始元素的 jQuery 副本) 的对象，并将其添加到 list 数组中。这个 list 数组将作为 Fuse.js 的数据源。
-
Fuse.js 初始化： new Fuse(list, options) 创建一个 Fuse.js 实例。
- shouldSort: false：在此示例中，我们选择不让 Fuse.js 自动排序，通常 Fuse.js 会根据匹配得分进行排序。
- threshold: 0.5：这是一个关键参数，控制模糊匹配的容错性。0 表示精确匹配，1 表示完全模糊匹配。0.5 是一个折中的值，允许一定的拼写错误或部分匹配。
- keys: ['title']：告诉 Fuse.js 在 list 数组中的每个对象的哪个属性（这里是 title）上执行搜索。
- 执行搜索： 当用户在输入框中输入时，fuse.search(searchTerm) 方法会被调用。它会根据配置的 keys 和 threshold 对 list 中的数据进行模糊匹配。
- 结果渲染： fuse.search() 返回一个结果数组，每个结果对象包含 item（即我们原始存储的 { title: ..., el: ... } 对象）和 score。我们遍历这个结果数组，将 o.item.el（原始元素的副本）添加到 .result 容器中。
2.3 其他模糊搜索库
除了 Fuse.js，还有其他一些优秀的模糊搜索库可供选择，例如：
- List.js: 专注于列表和表格的搜索、排序和过滤功能，也提供了模糊搜索。
- Minisearch: 一个轻量级的客户端全文本搜索库，支持模糊搜索和权重。
选择哪个库取决于项目的具体需求、性能要求和集成复杂性。
三、注意事项与总结
-
性能考量：
- 数据量： 对于少量数据，直接遍历和字符串匹配可能足够。但对于大量数据（数百甚至数千条），使用 Fuse.js 这样的优化库可以显著提高搜索性能和用户体验。
- DOM 操作： 频繁的 DOM 操作会影响性能。在模糊搜索示例中，我们先克隆元素并将其存储在 JavaScript 数组中，然后只在搜索结果变化时操作 DOM，这是推荐的做法。
-
搜索策略选择：
- 精确匹配适用于需要严格匹配的场景，例如根据 ID 或特定编码查找。
- 模糊搜索适用于用户输入不确定、需要容错或提供更灵活搜索体验的场景。
-
用户体验：
- 提供清晰的搜索提示和未找到结果时的反馈信息。
- 考虑添加防抖（debounce）功能，以避免在用户快速输入时频繁触发搜索，从而优化性能。
-
国际化与特殊字符：
- 原始问题提到了重音字符（如 À）。Fuse.js 在一定程度上可以处理这类字符的模糊匹配，但如果需要更严格的重音或特殊字符忽略，可能需要在将数据传递给 Fuse.js 之前进行预处理，例如将所有字符转换为其无重音的等价形式。
通过本文的介绍，您应该能够根据项目的具体需求，选择并实现针对HTML data-attr 属性的精确或模糊搜索功能。精确匹配简单高效，适用于严格条件；而模糊搜索则通过引入如 Fuse.js 等专业库，提供了更强大、更用户友好的搜索体验。
