Real time filtering search bar for image gallery based off caption keywords

I have 12 photos set up with a search bar above them. I am trying to  get my search bar to filter through the captions and only show the images that contain the keywords the user types in the search bar.

my Js file...

$(document.ready(function(){
  $("#filter").keyup(function(){
    var $filter = $(this).toLowerCase();
    var $caption = $(".imageGallery").attr("data-title");
    var $image = $(".imageGallery img src");
    for ( i = 0; i < $caption.length; i++;) {
      $(this).filter($image);
    } if ( $filter === $caption.each().toLowerCase()){
      $image.show();
    } else {
      $image.hide();
    }
  });
});


and  my html....

<form action="" method="post">
      <fieldset>
        <input type="search" id="filter" name="user_search" placeholder="Search(16pt)">
      </fieldset>
    </form>
    <ul class="imageGallery">
      <li><a href="img/fullsize/01.jpg" data-title="I love hay bales. Took this snap on a drive through the countryside past straw fields." data-lightbox="picture_one"><img src="img/thumb/01.jpg" alt=""></a></li>