Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Gina Schweizer
.a{fill-rule:evenodd;}techdegree
Gina Schweizer
Front End Web Development Techdegree Student 10,721 Points

Live image search - all of my images disappear when I start typing.

I feel like I'm so close on this but I can't get it to work completely. I'm trying to perform a live search on the gallery I have based on the captions. When I start typing, all of my images disappear and none show up. What am I doing wrong?

<div id="lightGallery">
      <a href="photos/01.jpg"><img src="photos/thumbnails/01.jpg" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields." title="Hay Bales"></a>
      <a href="photos/02.jpg"><img src="photos/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here." title="Lake"></a>
      <a href="photos/03.jpg"><img src="photos/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below." title="Canyon"></a>
      <a href="photos/04.jpg"><img src="photos/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today." title="Iceberg"></a>
      <a href="photos/05.jpg"><img src="photos/thumbnails/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons." title="Desert"></a>
      <a href="photos/06.jpg"><img src="photos/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color." title="Fall"></a>
      <a href="photos/07.jpg"><img src="photos/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!" title="Plantation"></a>
      <a href="photos/08.jpg"><img src="photos/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!" title="Dunes"></a>
      <a href="photos/09.jpg"><img src="photos/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane." title="Countryside Lane"></a>
      <a href="photos/10.jpg"><img src="photos/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange." title="Sunset"></a>
      <a href="photos/11.jpg"<img src="photos/thumbnails/11.jpg" alt="I did a tour of a cave today and the view of the landscape below was breathtaking." title="Cave"></a>
      <a href="photos/12.jpg"><img src="photos/thumbnails/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in." title="Bluebells"></a>
   </div>

  $(document).ready(function(){
     $("#searchBar").keyup(function(){

    //Retrieve the input field text
    var filter = $(this).val();

    //Loop through the caption list
    $("#lightGallery img").each(function(){

      //If the image does not contain the caption text, hide it
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();

       // Show the image if the phrase matches
      } else {
         $(this).show();
      }

     });
  });
});

2 Answers

Corina Meyer
Corina Meyer
9,990 Points

try to search in the alt attribute instead:

        if (alt.search(regex) < 0) {
            $(this).fadeOut();

        // Show the image if the phrase matches
        } else {
            $(this).show();
        }
Gina Schweizer
.a{fill-rule:evenodd;}techdegree
Gina Schweizer
Front End Web Development Techdegree Student 10,721 Points

Apparently I can't read...IT WORKED! I have been working two days on this trying to figure it out! You are awesome! Thanks!

Corina Meyer
Corina Meyer
9,990 Points
Corina Meyer
Corina Meyer
9,990 Points

It seems as if you changed the structure of your html while coding :) The comment says you loop through captions, but you loop through images and those return an empty string for the text()-method. Try to search the title and/or alt-attributes instead and it should work.

Gina Schweizer
.a{fill-rule:evenodd;}techdegree
Gina Schweizer
Front End Web Development Techdegree Student 10,721 Points

Okay. But I'm still getting the same results. All of the images are disappearing. Is this code wrong?

$(document).ready(function(){ $("#searchBar").keyup(function(){

    // Retrieve the input field text
    var filter = $(this).val();
    var regex = new RegExp(filter, "i");   

    // Loop through the captions
    $("#lightGallery img").each(function(){
      var alt = $(this).attr("alt");

        // If the caption does not contain the text phrase fade it out
        if ($(this).text().search(regex) < 0) {
            $(this).fadeOut();

        // Show the image if the phrase matches
        } else {
            $(this).show();
        }
    });

});

});