jQuery与Fuse.js：实现HTML data 属性的精确与模糊搜索教程-js教程-PHP中文网

jQuery与Fuse.js：实现HTML data 属性的精确与模糊搜索教程

霞舞

发布： 2025-09-30 13:51:15

原创

467人浏览过

jquery与fuse.js：实现html data 属性的精确与模糊搜索教程

本教程详细介绍了如何使用jQuery对HTML元素的data属性进行精确和模糊搜索。针对精确匹配，我们将利用属性选择器；对于更复杂的模糊搜索需求，包括处理重音字符和部分匹配，我们将引入功能强大的第三方库Fuse.js，并提供详细的集成与使用示例，帮助开发者构建高效灵活的前端搜索功能。

在前端开发中，我们经常需要根据HTML元素的自定义data属性值来查找和过滤元素。这可能涉及简单的精确匹配，也可能需要复杂的模糊搜索，例如忽略大小写、处理重音字符或查找部分匹配项。本教程将深入探讨如何使用jQuery和外部库来实现这些搜索功能。

一、精确匹配 data 属性值

当我们需要根据data属性的完整、准确值来查找元素时，jQuery的属性选择器是最直接有效的方法。例如，要查找data-search属性值为"A-plus"的元素，直接使用[data-search="A-plus"]即可。

以下是一个实现精确搜索的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>精确Data属性搜索</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input class="searcher" placeholder="输入精确搜索词">
    <ul>    
        <li class="items" data-search="A-plus">#À plus !</li>
        <li class="items" data-search="B-minus">#B minus !</li>
    </ul>
    <br>
    result:<br>
    <div class="result"></div>

    <script>
        /**
         * 根据data-search属性进行精确查找元素
         * @param {string} elemSelector - 待查找元素的CSS选择器
         * @param {string} searchText - 要精确匹配的文本
         * @returns {jQuery|string} 找到的元素的克隆副本或“Not found!”提示
         */
        function findElementByText(elemSelector, searchText) {
            // 使用属性选择器进行精确匹配
            const find = $(`${elemSelector}[data-search="${searchText}"]`);
            if (find.length) {
                return find.clone(); // 返回找到元素的克隆副本
            }
            return '<i>Not found!</i>'; // 未找到时返回提示
        }

        $(document).on('input', '.searcher', function() {
            const searchValue = $(this).val().trim(); // 获取输入框的值并去除首尾空格
            $('.result').html( findElementByText( '.items', searchValue ) );
        });
    </script>
</body>
</html>

登录后复制

代码解析：

立即学习“前端免费学习笔记（深入）”；

$(${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是两个流行的选择，它们提供了强大的客户端模糊搜索能力。

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

本节将以Fuse.js为例，详细讲解如何集成并使用它来实现灵活的模糊搜索。

2.1 引入 Fuse.js

首先，在HTML文件中引入Fuse.js库。你可以通过CDN方式引入：

<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script>

登录后复制

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

以上就是jQuery与Fuse.js：实现HTML data 属性的精确与模糊搜索教程的详细内容，更多请关注php中文网其它相关文章！