Search page, using <img alt> to display divs in Bootstrap 3

I am trying to build a jQuery live search that displays the div based on the images alt content in HTML.

I found an example here that does it using the text from a tag's class. I applied it to my Bootstrap example. How can I do this to find it using text in the alt? What did I do wrong?

// then, on entering text...
$("#filter").on("keyup", function() {
  if ($(this).val().length > 0) {
    // hide everything,
    $(".media").hide();
    // get the text in the input
    var mySearch = $(this).val();
    var alt = $(this).find("img").attr("[alt*='" + mySearch + "' i]");
    // show any class that contains the input
    alt.show();
  } else {
    $(".media").show();
  }

});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>My Items</h2>

<br>
<input class="form-control" type="text" class="text-input" id="filter" placeholder=" Search item" />

<br/>
<br/>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Mountain brown bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">1</h3>bear hug
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Russian Road salmon bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">2</h3>bear fight
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Uganda contest forest ">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">3</h3>bear stare
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://placekitten.com/60/60" alt="UK London Restaurant meat">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">4</h3>bears bath
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Somalia splash Sea">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">5</h3>bear splash
  </div>
</div>

Codepen

Solution

There's a couple of issues in your logic. Firstly you're doing find('img') from the reference to the input, hence that will never find anything. Secondly, you're searching for a match on the entire alt value. Presumably from the description you want to match on each word. You can achieve that by using filter() along with a regular expression, something like this:

$("#filter").on('input', function() {
  var mySearch = $(this).val();
  var $media = $(".media");  
  
  if (mySearch.trim().length > 0) {
    var $mediaToShow = $media.hide().filter(function() {
      var re = new RegExp(mySearch, 'gi');
      return re.test($(this).find('img[alt]').prop('alt'));
    });
    $mediaToShow.show();
  } else {
    $media.show();
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>My Items</h2><br>
<input class="form-control" type="text" class="text-input" id="filter" placeholder=" Search item" /><br/><br/>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Mountain brown bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">1</h3>bear hug
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Russian Road salmon bear">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">2</h3>bear fight
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Uganda contest forest ">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">3</h3>bear stare
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="UK London Restaurant meat">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">4</h3>bears bath
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.placebear.com/60/60" alt="Somalia splash Sea">
    </a>
  </div>
  <div class="media-body">
    <h3 class="media-heading">5</h3>bear splash
  </div>
</div>

Also note the use of the input event over keyup, as the former will also work when content is pasted in to the field.