Avatar of Robert Weber
Robert Weber

asked on 

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...

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

and  my html....

<form action="" method="post">
        <input type="search" id="filter" name="user_search" placeholder="Search(16pt)">
    <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>

Avatar of undefined
Last Comment
Leonidas Dosas

8/22/2022 - Mon