troubleshooting Question

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

Avatar of Robert Weber
Robert Weber asked on
JavaScript
1 Comment1 Solution79 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros