Показать / Скрыть элементы img на основе значения ввода (панель поиска) с помощью Jquery

Question

У меня есть сетка фотогалереи, и я хочу иметь возможность искать значение тега img 'data-title' и показывать только изображения, которые имеют соответствующие данные.Поэтому, если я наберу «сено», будет показано изображение ниже, но все изображения на сайте без «сена» в их названии данных будут скрыты.

<a href="photo_gallery\photos\01.jpg" data-lightbox="gallery" data-title
 ="Hay Bales - I love hay bales. Took this snap on a drive through the 
 countryside past some straw fields.">
    <img src="photo_gallery\photos\thumbnails\01.jpg" alt="fields">
</a>  

Я изменил некоторый код, который нашел наздесь о том, как скрыть div, но не могу заставить его работать для поиска атрибута data-title.Если я вписываю что-либо в поле поиска, оно скрывает каждое изображение, независимо от того, какой атрибут заголовка данных.

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

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($('a[data-title='+value+']', this).text());
        $(this).toggle(isMatch);
    });
});

Где я здесь ошибаюсь?Так настраивается панель поиска.

 <div class="searchBar">
   <input type="text" name="search" id="search" placeholder="Search">
 </div>

Answer 1

Альтернативным ответом будет полное удаление RegExp, поскольку вы используете набор данных html5, и вы можете просто сравнить значения напрямую, если хотите.

Примерно так:

https://jsfiddle.net/edh4131/pq3k5zdo/2/

Answer 2

Так как ваши теги привязки не имеют текстовых узлов, используя метод JQuery .text () , ваши значения будут проверены на наличие пустой строки.Вместо этого нацельтесь на атрибут данных элемента и используйте его в качестве объекта проверки регулярного выражения.

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

    var value = $(this).val();
    var exp = new RegExp(value);

    $('a').each(function() {
        var isMatch = exp.test($(this).data('title'));
        $(this).toggle(isMatch);
    });
});