使用数据属性值搜索 div

Question

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

如何实现

<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

Answer 2

您使用的语法不正确。

将您的代码替换为此

$('#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();     
    }
});

使用数据属性值搜索 div

Search div using data attribute value

javascript

jquery

sorting

undefined