Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Jquery : Implement the search box at the top of the page that filters photos based on the captions.

Hey guys,

I have a quick question. I am pretty new to jquery and really haven't learned much from the courses so far. It seems that they are just jump all over the place. So I am working on a project where I am supposed to implement a search box and filter photos based on captions. I have no clue how to do this. I have searched google for two hours and haven't found much that really makes sense. I am wondering if anyone would know how to do this and if they would help me if possible. I appreciate any help that anyone can provide.

Thank you, Brandon

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

Could you post whatever code you have so far?

3 Answers

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

Does this work? I tested it in Jfiddle and it seemed to do what you want but I'm tired, it's late, and I don't have full paths to the images so I'm not completely sure. I hope this helps. If you do test this, let me know how it goes.

$('#search-bar').keyup(function()
   { var valThis = $(this).val().toLowerCase(); var noresult = 0; if(valThis === ""){
$('.galleryList > li').show();
    noresult = 1;
    $('.no-results-found').remove();
} else {
    $('.galleryList > li').each(function(){
        var text = $(this).text().toLowerCase();
        var match = text.indexOf(valThis);
        if (match >= 0) {
            $(this).show();
            noresult = 1;
            $('.no-results-found').remove();
        } else {
            $(this).hide();
        }
    });
} 
if (noresult === 0) { $(".galleryList").append('No results found.'); } });

This looks like it may work without issue. I am going to attempt a few things and I will let you know! Thank you!

Sure. Here is the jquery that I have so far. It kind of works...but I need to search based off of the alt attribute of the images. I can't figure out how to do that for the life of me. This code is just something I finally found and modified.

Javascript :

$('#search-bar').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    var noresult = 0;
    if(valThis == ""){

        $('.galleryList > li').show();
        noresult = 1;
        $('.no-results-found').remove();
    } else {
        $('.galleryList > li').each(function(){
            var text = $(this).text().toLowerCase();
            var match = text.indexOf(valThis);
            if (match >= 0) {
                $(this).show();
                noresult = 1;
                $('.no-results-found').remove();
            } else {
                $(this).hide();
            }
        });
   };
    if (noresult == 0) {
        $(".galleryList").append('<li class="no-results-found">No results found.</li>');
    }
});

End of Javascript.

I will also post my unordered list below so you can see the contents of it.

HTML :

        <ul id = "gallery-img" class = "galleryList">

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

That should be all the code. Thank you.

Ken Alger
Ken Alger
Treehouse Teacher

Edited for markdown.