javascript - 使用数据属性值搜索 div

Question

根据数据属性搜索元素。我有以下代码，想知道如果带空格的数据属性值

如何实现

<div class="data" data-value="auto"> abcd </div>
<div class="data" data-value="simple tab,block"> acd </div>
<div class="data" data-value="auto"> abd </div>
<div class="data" data-value="block"> abcde </div>
<div class="null-data"> type the correct value </div>

<input class="search-text" name="keyword" type="text" id="search-keyword" placeholder="search">

在键入输入值事件时，我基本上想找出属于特定数据值的所有项目？

$('#search-keyword').on( "keyup", function() {
$('.null-data').hide();
    if($(this).val()) {
        var input = $(this).val().toLowerCase();
        $(".data").hide();
        $(".data[data-value*="+ input +"]").show();
        if(!$('.data:visible').get(0)){
            $('.null-data').show();
        }
    }else{
        $('.null-data').show();     
    }
});

我正在获取基于数据属性值的 html 元素，但如果数据属性值有空格，则不会显示 html 元素。

Answer 1

在构建选择器时，您需要将输入值用引号括起来，就像其中的内容元字符一样:

$(".data[data-value*='"+ input +"']").show();
//-------------------^-----------^
    if(!$('.data:visible').get(0)){
        $('.null-data').show();
    }

Workin Demo