Javascript 如何创建图像库标题的搜索过滤器？

我目前有一个页面设置，显示文件夹中的所有图像，并根据图像下的图像名称显示标题

我的目标是创建一个搜索过滤器，它只显示在基于标题文本的图像上。因为我使用for循环来显示标题，所以我很难通过搜索过滤器找到标题名称

我已经提供了gallery.html以及我用来过滤字幕的JS

gallery.html

<div class="row" style="margin-left:0; margin-right:0;">

    <div class="col-lg-12" style="margin-left:0; margin-right:0;">
        <h1 class="page-header">Thumbnail Gallery</h1>
    </div>

    <input class="form-control mb-4" id="anythingSearch" type="text" placeholder="Search..">
    <!-- {{image_names}} -->
    <hr>
    {% for image_name in image_names %}
    
    <div class="col-lg-4 thumbnail" id="myImages">
        <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}">
        <div class="caption">
            <p>{{image_name}}</p>
        </div>
    </div>
    
    {% endfor %}
</div>

}))

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