title: Filtering bootstrap card visibility based on content inside card
body: <p>I can't figure out something that is probably quite simple to do. I have a grid with cards that look like this:</p>
  <pre><code>&lt;div class=&quot;card&quot;&gt;
    &lt;img src=&quot;data:image/jpg;base64,{{ books[book]['cover']}}&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
    &lt;div class=&quot;card-img-overlay&quot;&gt;
      &lt;span class=&quot;title&quot;&gt;&lt;h5 class=&quot;bg-dark text-white&quot;&gt;{{ book }}&lt;/h5&gt;&lt;/span&gt;
      &lt;span class=&quot;author&quot;&gt;&lt;h5 class=&quot;bg-dark text-white author&quot;&gt;{{ books[book]['author'] }}&lt;/h5&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have an input field called <code>search-authors</code> and want to hide cards that do not contain whatever the value of <code>search-authors</code> is.</p>
  <p>I'm trying to use this:</p>
  <pre><code>            $(&quot;#search-authors&quot;).on(&quot;keyup&quot;, function() {
                var value = $(this).val().toLowerCase();
                  $(&quot;.card *&quot;).filter(function() {
                    $(&quot;.card&quot;).css('display', 'none')
                    .filter(':contains(' + value + ')')
                    .css('display', 'block');
                  });
              });
  </code></pre>
  <p>This isn't working the way I expect it to. For example, typing just <code>c</code> shows only cards which contain <code>c</code> but typing <code>co</code> hides cards that contain <code>co</code> and did show up correctly typing just <code>c</code>.</p>
  <p>Any pointers would be greatly appreciated!</p>
  <p>Thanks</p>