使用数据属性值搜索div

基于数据属性的搜索元素。我有下面的代码，并想知道，怎么能当数据与空间使用数据属性值搜索div

<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元素都没有显示出来。

来源

2015-01-08 Raju28

属性的值不能包含空格，您可以用下划线代替 – kapantzak

如果觉得一个非常普遍的问题。请在查询之前进行搜索：http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-on-html5 – fjuan

@JohnKapantzakis：什么？当然可以。属性值可以是任何字符串。属性*名称*当然是另一回事。 –

同时建设的选择，你需要元字符包裹在报价输入值作为内容是：

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

Workin Demo

来源

2015-01-08 07:21:03

您正在使用不正确的语法。

替换你的代码，这

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

来源

2015-01-08 07:22:24 Manoj

使用数据属性值搜索div

回答

相关问题