Галерея не отображается после выполнения Javascript

Question

У меня есть галерея с изображениями и абзацами (заголовки для изображений). При открытии ссылки вы увидите все картинки с названиями, но как только вы что-то ищете, картинки исчезли. Любое предложение о том, как это исправить? https://lazartest1.myshopify.com/pages/testtesttest Это код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>// <![CDATA[
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
  });
});
// ]]></script>

HTML:

Answer 1

Измените ваш селектор jQuery, чтобы выбрать только те элементы, которые вам нужны.
ie, измените $("#myDIV *") на $("#myDIV .img-box").

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV .img-box").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
  });
});