Filtering bootstrap card visibility based on content inside card

Question

I can't figure out something that is probably quite simple to do. I have a grid with cards that look like this:

<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">{{ book }}</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">{{ books[book]['author'] }}</h5>
  </div>
</div>

I have an input field called search-authors and want to hide cards that do not contain whatever the value of search-authors is.

I'm trying to use this:

            $("#search-authors").on("keyup", function() {
              var value = $(this).val().toLowerCase();
                $(".card *").filter(function() {
                  $(".card").css('display', 'none')
                  .filter(':contains(' + value + ')')
                  .css('display', 'block');
                });
            });

This isn't working the way I expect it to. For example, typing just c shows only cards which contain c but typing co hides cards that contain co and did show up correctly typing just c.

Any pointers would be greatly appreciated!

Thanks