Regex/jQuery（検索用）を使用してHTML属性を一致させよう

Question

画像ライブラリのkeypressで検索（フィルタリング）を開始しようとしています。そして、ユーザが「AB」で入力を始める

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

その場合：ユーザは、画像の名前に入力を始めると、検索語と一致していない任意の画像名が隠されます$('#xyz').hide();

どうすればいいですか？属性に対してregexを使用できますか？

Answer 1

//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://jsfiddle.net/HRjHV/3/

Answer 2

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

編集：http://api.jquery.com/notここ

が動作デモである：ここ.not()関数のドキュメントであるhttp://api.jquery.com/attribute-contains-selector/

：

ここ*=（含む）のセレクタのドキュメントです。これを参考にしておきますが、@ Jasperのソリューションはずっと効率的です。

Answer 3

あなたはすべてのdivを毎回循環させて、その可能性があります。

は、あなたが少し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(); 
}); 

Answer 4

<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/