如何使用javascript创建图像和文本的搜索栏

我想创建一个搜索栏，从页面中过滤出div。 我试图创建一个，但是它只能过滤掉div中的文本并使图像消失。

我的Javascript：

    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        $("img[alt*=" + val + "]").show();
    }
});

    $(document).ready(function(){
  $("#articleSearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#card *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我的HTML：

<input type="text" id="articleSearchInput" placeholder="Search For Blalala......">

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum0" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum1" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum2" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

有什么办法可以使此搜索栏同时处理图像和文本？ 提前致谢。 请让我知道是否需要在问题中添加更多信息。