使用data- *属性过滤div元素仅适用于区分大小写的搜索

Question

我正在尝试为一组卡片创建搜索过滤器。每张卡都有一个 data-pname 属性，我将此属性的值用于我的过滤器。

问题：当前代码无法匹配＆＃34; facebook＆＃34;使用data-name = Facebook或＆＃34; messenger＆＃34;使用data-pname = Messenger。

代码段：

var addon_search = document.createElement('input');
$(addon_search).on('keyup', function() {
    var value = $(this).val();
    $('[data-pname]').hide();
    if (value.length < 1) {
        $('[data-pname]').show();
    }
    $('[data-pname*=' + value + ']').each(function() {
        $(this).show();
    });
});

Answer 1

您可以将i标志添加到jQuery选择器中，使其不区分大小写：

PS：我也删除了你的上一个.each()，你不需要它。

var addon_search = document.createElement('input');
$(addon_search).on('keyup', function() {
    var value = $(this).val();
    $('[data-pname]').hide();
    if (value.length < 1) {
        $('[data-pname]').show();
    }                            // v Here
    $('[data-pname*="' + value + '" i]').show();
});