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 Robert Weber
.a{fill-rule:evenodd;}techdegree
Robert Weber
Front End Web Development Techdegree Student 10,340 Points

Having trouble with responsive search bar for image gallery.

I need to have a real time filtering search bar for my image gallery based off words in the captions. As a user types, the images should show or hide based on whether the image's caption contains the keywords in the search field. I've been struggling for hours with this and I do not want to use a plug in. Here are my HTML and my 5th Javascript code I have tried.

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

      <li><a href="img/fullsize/02.jpg" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here." data-lightbox="picture_one"><img src="img/thumb/02.jpg" alt=""></a></li>


      <li><a href="img/fullsize/03.jpg" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below." data-lightbox="picture_one"><img src="img/thumb/03.jpg" alt=""></a></li>


      <li><a href="img/fullsize/04.jpg" data-title="It was amazing to see an iceberg up close, it was so cold but didn't snow today." data-lightbox="picture_one"><img src="img/thumb/04.jpg" alt=""></a></li>


      <li><a href="img/fullsize/05.jpg" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons." data-lightbox="picture_one"><img src="img/thumb/05.jpg" alt=""></a></li>


      <li><a href="img/fullsize/06.jpg" data-title="Fall is coming, I love when the leaves on the trees start to change color." data-lightbox="picture_one"><img src="img/thumb/06.jpg" alt=""></a></li>


      <li><a href="img/fullsize/07.jpg" data-title="I drove past this plantation yesterday, everything is so green!" data-lightbox="picture_one"><img src="img/thumb/07.jpg" alt=""></a></li>


      <li><a href="img/fullsize/08.jpg" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!" data-lightbox="picture_one"><img src="img/thumb/08.jpg" alt=""></a></li>

      <li><a href="img/fullsize/09.jpg" data-title="We enjoyed a quiet stroll down this countryside lane." data-lightbox="picture_one"><img src="img/thumb/09.jpg" alt=""></a></li>

      <li><a href="img/fullsize/10.jpg" data-title="Sunset at the coast! The sky turned a lovely shade of orange." data-lightbox="picture_one"><img src="img/thumb/10.jpg" alt=""></a></li>

      <li><a href="img/fullsize/11.jpg" data-title="I did a tour of a cave today and the view of the landscape below was breathtaking." data-lightbox="picture_one"><img src="img/thumb/11.jpg" alt=""></a></li>

      <li><a href="img/fullsize/12.jpg" data-title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in." data-lightbox="picture_one"><img src="img/thumb/12.jpg" alt=""></a></li>

    </ul>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>

Javascript

$($search).keyup(function(){
  var $search = $('#filter').click();
  var $title = $('img').attr('data-title');
  if ( $search.toLowerCase() === $title.toLowerCase()){
      $('.imageGallery img').show();
      } else {
        $('.imageGallery img').hide();
      };
});
Savannah Lynn
Savannah Lynn
13,662 Points

Hi Robert,

First thing I notice is you are trying to store $search as a click function, when click does not contain any value yet, you have to assign it a function. Trying inserting your if else statement inside the click function. You will have to play around with the syntax a bit, but that is a good place to start.

var $search = $('#filter').click( function () { //Insert what you want it to do on click here });

3 Answers

Savannah Lynn
Savannah Lynn
13,662 Points

One issue I am seeing is on the third line

=== ($search).toLowerCase()

The parenthesis around $search are unnecessary because $search is a variable. Try it without them.

=== ($search.toLowerCase())

Same thing with $title. You already defined it as a variable using jQuery. It can now stand alone and doesn't need to keep being referenced as $().

if ($title.toLowerCase()) === ($search.toLowerCase())

Robert Weber
seal-mask
.a{fill-rule:evenodd;}techdegree
Robert Weber
Front End Web Development Techdegree Student 10,340 Points
Robert Weber
.a{fill-rule:evenodd;}techdegree
Robert Weber
Front End Web Development Techdegree Student 10,340 Points

Thanks for your reply, but I still feel stuck on how I should attempt the documentation.

Savannah Lynn
Savannah Lynn
13,662 Points
Savannah Lynn
Savannah Lynn
13,662 Points

You're actually really close. Go through your code line by line and make sure that the code is following all of the steps that you meant it to. Make sure all variables are tied back to the event you want to call and things like that. It can be overwhelming to write your own script from scratch, but try to break down into as many detailed, individual steps as you can, and then tackle those steps one at a time.

Since we know that plugins to do this kind of action already exist, you can always go through the source code of different plugins and see the different DOM elements and steps that the creater used to achieve that result. It might give you some ideas!

If you get really close again and think you have it, but for some reason the code still won't run, then you can always try posting your code back on Treehouse or Stack Overflow.

When I first attempted to write this plugin, I felt really overwhelmed and didn't think I had the adequate grasp of Javascript. So I went back rewatched ALL of the videos on javascript and jQuery. Tedious, yes, but somehow that second exposure made everything click all of sudden, and then revisiting the plugin challenge was much easier.

Robert Weber
.a{fill-rule:evenodd;}techdegree
Robert Weber
Front End Web Development Techdegree Student 10,340 Points

this is what i came up with, yet it still doesn't work. The images fluctuate but do not filter.

$search.keyup(function(event){
  var title = $('.imageGallery img').attr('data-title');
  if ( $('title').toLowerCase() === ($search).toLowerCase()) {
    $('imageGallery img').show();      
   } else {
    $('imageGallery img').hide();
   }
});