使用 Jquery 搜索元素的数据属性，部分匹配答案

【问题标题】：Search data attribute of element with Jquery, with partial matches使用 Jquery 搜索元素的数据属性，部分匹配
【发布时间】：2017-04-12 18:27:31
【问题描述】：

我正在使用输入字段和 on("keyup") 事件构建项目过滤器。它看起来像这样：

$("#inputFilter").on("keyup", filterPrograms);

在类中查找项目效果很好，如下所示：

<h6 class="programName">Science</h6>

但是，在其中一些 H6 中，我添加了一个数据属性，如下所示：

<h6 class="programName" data-tag="indigenous interdisciplinary ">Aboriginal Studies</h6>

如何修改以下代码来过滤类的文本（当前工作）以及数据标签的内容？只要部分匹配不正确，这就会简单地隐藏父块“.mix”。这是我的功能：

   function filterPrograms(event) {
        // Retrieve the input field text
        var filter = $('#inputFilter').val();
        // Loop through the blocks
        $(".programName").each(function(){
            // this part isn't working!!
            dataResult = $(this).is('[data-tag*='+filter+']') < 0;
            // If the item does not contain the text phrase, hide it
            textResult = $(this).text().search(new RegExp(filter, "i")) < 0;
            if (textResult || dataResult) {
                $(this).closest(".mix").hide();           
            } else {
                $(this).closest(".mix").show();
            }
        });
    }

现在，我很确定这是因为 .is() 永远不会完全匹配，这就是我需要部分匹配的原因。在上面的示例中，键入“indi”应该会针对 data-tag 属性的内容提供肯定的结果；这不起作用。键入“abo”与 textResult 匹配，并且工作正常。

我知道我遗漏了一些东西，但是阅读文档（和 SO）并没有帮助。提前致谢。

编辑：这是@Triptych 解决方案的工作功能：

$(".programName").each(function(){
    // If the item does not contain the text phrase hide it
    dataResult = $(this).is('[data-tag*="'+filter+'"]');
    textResult = $(this).text().search(new RegExp(filter, "i")) < 0;
    if (textResult && !dataResult) {
        $(this).closest(".mix").hide(); // Hide the item if there are no matches
    } else {
        $(this).closest(".mix").show(); // Show the item if there are matches
    }
});

【问题讨论】：

标签： javascript jquery function filter custom-data-attribute

【解决方案1】：

一方面，您无法将.is() 的结果与0 进行比较。 is() 返回一个布尔值。

所以改变这个。

    dataResult = $(this).is('[data-tag*='+filter+']') < 0;

到这里。

    dataResult = $(this).is('[data-tag*="'+filter+'"]');

请注意，我还引用了属性匹配的字符串，这将允许查询包含空格。

【讨论】：