使用Regex/jQuery匹配HTML屬性（用於搜索）

我試圖在keypress上爲圖像庫啓動搜索（或者更確切地說是篩選器）。用戶開始在圖像的輸入文件名，並且不符合搜索條件的任何形象的名字被隱藏：使用Regex/jQuery匹配HTML屬性（用於搜索）

<div id="abc" data-imgName="abc"></div> 
<div id="abc2" data-imgName="abc2"></div> 
<div id="xyz" data-imgName="xyz"></div>

因此，如果用戶在啓動「AB」輸入，則：$('#xyz').hide();

我該怎麼做？我可以在屬性上使用正則表達式嗎？

來源

2012-01-13 Kyle

你可以使用正則表達式，當然，但由於它只是基本字符和字符串的開始，爲什麼不使用函數來查看是否使用了條g從定義的字符開始？ – fge 2012-01-13 23:39:12

你需要正則表達式還是僅僅爲了尋找完全匹配而已？ – Yogu 2012-01-13 23:40:05

hi @fge。正則表達式，使「bc」隱藏「xyz」，而不是「abc2」 – Kyle 2012-01-13 23:41:27

//bind an event handler to the text input for the keyup event (so the value will have changed by the time this event fires) 
$('input[type="text"]').on('keyup', function (event) { 

    //convert the value of the text box to lowercase 
    this.value = this.value.toLowerCase(); 

    //cache the elements that match the search 
    var good_to_go = $('[data-imgName*=' + $(this).val() + ']').show(); 

    //hide all the elements that do not match the search 
    $('[data-imgName]').not(good_to_go).hide(); 
});

有可能是一個辦法做到這一點，執行得更好，但是這需要文字輸入的值，並認爲所有包含文本輸入的值data-imgName屬性的元素。然後它找到所有具有data-imgName屬性的元素，並隱藏所有尚未找到的元素。

如果你有一個父元素的所有搜索元素，你應該開始都用它來選擇，以避免搜索整個DOM：

var $container = $('#container-id'); 
$('input[type="text"]').on('keyup', function (event) { 
    this.value = this.value.toLowerCase(); 
    if (this.value == '') { 
     $container.children().show(); 
    } else { 
     var good_to_go = $container.find('[data-imgName*="' + this.value + '"]').show(); 
     $container.find('[data-imgName]').not(good_to_go).hide(); 
    } 
});

注意，這個例子還檢查的價值文本框是什麼都沒有，如果是的話，它顯示所有搜索到的元素。

這裏是爲*=（含）選擇文檔：http://api.jquery.com/attribute-contains-selector/

這裏是爲.not()函數文檔：http://api.jquery.com/not

這裏是一個工作演示：http://jsfiddle.net/HRjHV/3/

來源

2012-01-13 23:39:26 Jasper

我也建議做的關鍵，而不是按鍵http://api.jquery.com/keyup/。 – 2012-01-13 23:40:40

有趣的是，我只是做了這個改變，然後當帖子刷新時，你的評論是，很好的評論。 – Jasper 2012-01-13 23:42:16

我也會讓它'var good_to_go = $（'[data-imgName * ='+ $（this）.val（）+']'）。show（）'。如果用戶退格和查詢現在匹配該項目，那麼隱藏的項目將再次顯示。 – 2012-01-13 23:44:04

$('#yourField').on('keyup', function() { 
    $('.image').each(function() { 
     if ($(this).attr('data-imgName').indexOf($('#yourField').val()) === -1) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } 
    }); 
});

編輯：我會留下這個參考，但@ Jasper的解決方案更有效率。

來源

2012-01-13 23:39:53

你必須循環遍歷你所有的divs，然後纔有可能。

調整你HTML中的一點：

<div class="searchImg" data-imgName="abc"></div> 
<div class="searchImg" data-imgName="abc2"></div> 
<div class="searchImg" data-imgName="xyz"></div>

那麼你就可以通過他們循環：

var searchTerm = "abc"; 
$("div.searchImg").each(function() { 
    if($(this).attr("data-imgName").indexOf(searchTerm)) == -1) 
    $(this).hide(); 
    else 
    $(this).show(); 
});

來源

2012-01-13 23:41:09 Niko

<div id="image_holder"> 
    <div id="abc" data-imgName="abc">a</div> 
    <div id="abc2" data-imgName="abc2">b</div> 
    <div id="xyz" data-imgName="xyz">x</div> 
</div> 

<br> 

<input type="text" id="search"> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#search").keyup(function() { 

     var term = $(this).val(); 

     $("#image_holder").find("div").css("display", "block"); 

     $("#image_holder").find("div").each(function() { 

      if ($(this).attr("data-imgName").indexOf(term) < 0) { 

       $(this).css("display", "none"); 

      } 

     }); 

    }); 

}); 
</script>

這是給你一個小提琴：http://jsfiddle.net/yASQW/

來源

2012-01-13 23:43:07 Josh

使用Regex/jQuery匹配HTML屬性（用於搜索）

回答

相關問題