Функциональность панели поиска с использованием jQuery

Question

Я пытаюсь реализовать функцию окна поиска на странице изображений, используя jQuery. Я не хочу использовать плагин.

Код, который у меня есть, похоже, проверяет, есть ли атрибут search == data вместо того, чтобы проверять, включает ли атрибут данных поиск

Поиск бар

let images = document.getElementsByClassName('photo-link');

$('#searchbar').on('keyup', function() {
  let search = $('#searchbar').val().toLowerCase();

  $(images).each(function() {
    if (search == $(images).attr('data-alt')) {
      $(this).show();
    } else {
      $(this).fadeOut();

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <input id="searchbar" type="search" placeholder="Search" name="search">
</section>


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

Answer 1

• Вы проверяете все изображения на соответствие поиску
• Вы только строчные буквы поиска
• Если вы хотите искать все изображения, где data-alt имеет частичное совпадение, вам необходимо do $(this).attr('data-alt').toLowerCase().includes(search)

Это покажет только изображения, где полная строка поиска соответствует полному data-alt:

$('#searchbar').on('input', function() {
  const search = $('#searchbar').val().toLowerCase();
  $('.photo-link').each(function() {
    $(this).toggle(search == $(this).attr('data-alt').toLowerCase());
  });
});

Вы также можете поиграть с data-alt в одно дело и делаем

$('.photo-link[data-alt='+search+']').each(function() { ... })