troubleshooting Question

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

Avatar of Robert Weber
Robert Weber asked on
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...

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