使用數據屬性值搜索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

回答

相關問題