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

Posted February 23, 2017 8:33pm by

Jquery Search Filter

I am currently at the Photo Gallery project and I wanted to create a Search filtering content instead of placing a plugin, but I am blocked. I tried in different ways and none of them worked. Maybe I did not look in the right place. Could you please tell me what to search, where to look or what Treehouse courses to watch again? I am a beginner in JavaScript and I would really like to understand it, rather than just use some plugins. Thank you in advance :D

February 23, 2017 8:42pm

What type of search filtering are you attempting to do?

February 24, 2017 4:18pm

hello guys , I working on this project as well and I am still having trouble getting my search box to filter my images. How can I upload my code so you guys may have a look at it ?

February 24, 2017 4:50pm

Taran, code is added in a comment or answer box. If you open the link below this box that says "Markdown Cheatsheet", you'll see that three ` are needed to mark the beginning and end of a code block.

February 24, 2017 6:30pm

Thanks Jacob, here is my code:

html

<!DOCTYPE html>
<html>
<head>
<title>Jquery project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="lightbox/src/imagelightbox.js"></script>
<link href="lightbox/src/imagelightbox.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<form action="index.html" method="post">
<div id="photo-filter">
<input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">
</form>
</div>
<div class="content-photos">
<ul id="thumbnails">
<li><a class="selected"href="photos/01.jpg" data-imagelightbox="demo" data-ilb2-caption="
Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields"><img src="images/01.jpg" alt="
Hay Bales" title="1st Photo"></a></li>
<li><a href="photos/02.jpg"data-imagelightbox="demo" data-ilb2-caption="The lake was so calm today. We had a great view of the snow on the mountains from here"><img src="images/02.jpg" alt="Lake" title="1st Photo"></a></li>
<li><a href="photos/03.jpg" data-imagelightbox="demo"data-ilb2-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="images/03.jpg" alt="
Canyon" title="1st Photo"></a></li>
<li><a href="photos/04.jpg" data-imagelightbox="demo"data-ilb2-caption="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="images/04.jpg" alt="Iceberg
" title="1st Photo"></a></li>
<li><a href="photos/05.jpg" data-imagelightbox="demo"data-ilb2-caption="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="images/05.jpg" alt="
Desert" title="1st Photo"></a></li>
<li><a href="photos/06.jpg" data-imagelightbox="demo"data-ilb2-caption="
Fall is coming, I love when the leaves on the trees start to change color."><img src="images/06.jpg" alt="
Fall" title="1st Photo"></a></li>
<li><a href="photos/07.jpg" data-imagelightbox="demo"data-ilb2-caption="
I drove past this plantation yesterday, everything is so green!

"><img src="images/07.jpg" alt="Plantation" title="1st Photo"></a></li>
<li><a href="photos/08.jpg" data-imagelightbox="demo"data-ilb2-caption="
My summer vacation to the Oregon Coast. I love the sandy dunes!

"><img src="images/08.jpg" alt="
Dunes" title="1st Photo"></a></li>
<li><a href="photos/09.jpg" data-imagelightbox="demo"data-ilb2-caption="Lane
We enjoyed a quiet stroll down this countryside lane."><img src="images/09.jpg" alt="
Countryside" title="1st Photo"></a></li>
<li><a href="photos/10.jpg" data-imagelightbox="demo"data-ilb2-caption="Sunset at the coast! The sky turned a lovely shade of orange."><img src="images/10.jpg" alt="
Sunset" title="1st Photo"></a></li>
<li><a href="photos/11.jpg" data-imagelightbox="demo"data-ilb2-caption="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="images/11.jpg" alt="Cave" title="1st Photo"></a></li>
<li><a href="photos/12.jpg" data-imagelightbox="demo"data-ilb2-caption="
I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."><img src="images/12.jpg" alt="Bluebells" title="1st Photo"></a></li>
</ul>
</div>
<script src="js/apps.js"></script>
</body>
</html>

February 24, 2017 6:41pm

Taran,

You have a similar issue. You cannot submit a form to an HTML page, it has no way to process server side information.

$('#search').change(function() {  // This will need to change to the id of your search field
     var searchStr = $(this).val();
     $('.caption').each(function() { // Here you'll need to update your selector to find each image. As you are not using the class "caption" on any of your images. // '#thumbnails li' or something similar
          var str = $(this).attr("data-title"); //this call pulls the attribute "data-title", you'll need to update it to the attribute value you're using for the caption text. // 'data-ilb2-caption', You should also keep the code clean and add a space between attributes. 'data-imagelightbox="demo"data-ilb2-caption' to 'data-imagelightbox="demo" data-ilb2-caption'
          if(str.indexOf(searchStr) > -1) {  
               $(this).show(); 
          } else {
               $(this).hide(); 
          }
     });
});

February 24, 2017 8:41pm

Jacob Mckinney Thank you for your assistance. I still have not gotten the the search box to fill filter through the photos but I have made the changes to my code that listed. I also deleted my form tags from my html. here is my current code:

html

<!DOCTYPE html>
<html>
<head>
<title>Jquery project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="lightbox/src/imagelightbox.js"></script>
<link href="lightbox/src/imagelightbox.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<--form tags have been deleted-->
<div id="photo-filter">
<input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">
<--form tag deleted-->
</div>
<div class="content-photos">
<ul id="thumbnails">
<li><a class="caption"href="photos/01.jpg" data-imagelightbox="demo" data-ilb2-caption="
Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields"><img src="images/01.jpg" alt="
Hay Bales" title="1st Photo"></a></li>
<li><a class="caption"href="photos/02.jpg"data-imagelightbox="demo"  data-ilb2-caption="The lake was so calm today. We had a great view of the snow on the mountains from here"><img src="images/02.jpg" alt="Lake" title="1st Photo"></a></li>
<li><a class="caption"href="photos/03.jpg" data-imagelightbox="demo" data-ilb2-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="images/03.jpg" alt="
Canyon" title="1st Photo"></a></li>
<li><a class="caption"href="photos/04.jpg" data-imagelightbox="demo" data-ilb2-caption="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="images/04.jpg" alt="Iceberg
" title="1st Photo"></a></li>
<li><a class="caption"href="photos/05.jpg" data-imagelightbox="demo" data-ilb2-caption="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="images/05.jpg" alt="
Desert" title="1st Photo"></a></li>
<li><a class="caption"href="photos/06.jpg" data-imagelightbox="demo" data-ilb2-caption="
Fall is coming, I love when the leaves on the trees start to change color."><img src="images/06.jpg" alt="
Fall" title="1st Photo"></a></li>
<li><a class="caption"href="photos/07.jpg" data-imagelightbox="demo" data-ilb2-caption="
I drove past this plantation yesterday, everything is so green!

"><img src="images/07.jpg" alt="Plantation" title="1st Photo"></a></li>
<li><a class="caption"href="photos/08.jpg" data-imagelightbox="demo" data-ilb2-caption="
My summer vacation to the Oregon Coast. I love the sandy dunes!

"><img src="images/08.jpg" alt="
Dunes" title="1st Photo"></a></li>
<li><a class="caption"href="photos/09.jpg" data-imagelightbox="demo" data-ilb2-caption="Lane
We enjoyed a quiet stroll down this countryside lane."><img src="images/09.jpg" alt="
Countryside" title="1st Photo"></a></li>
<li><a class="caption"href="photos/10.jpg" data-imagelightbox="demo" data-ilb2-caption="Sunset at the coast! The sky turned a lovely shade of orange."><img src="images/10.jpg" alt="
Sunset" title="1st Photo"></a></li>
<li><a class="caption"href="photos/11.jpg" data-imagelightbox="demo" data-ilb2-caption="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="images/11.jpg" alt="Cave" title="1st Photo"></a></li>
<li><a class="caption"href="photos/12.jpg" data-imagelightbox="demo" data-ilb2-caption="
I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."><img src="images/12.jpg" alt="Bluebells" title="1st Photo"></a></li>
</ul>
</div>
<script src="js/apps.js"></script>
</body>
</html>

javascript

$('#filter').change(function() {  // This will need to change to the id of your search field
     var searchStr = $(this).val();
     $('#thumbnails li').each(function() { // Here you'll need to update your selector to find each image. As you are not using the class "caption" on any of your images. // '#thumbnails li' or something similar
          var str = $(this).attr("data-ilb2-caption"); //this call pulls the attribute "data-title", you'll need to update it to the attribute value you're using for the caption text. // 'data-ilb2-caption', You should also keep the code clean and add a space between attributes. 'data-imagelightbox="demo"data-ilb2-caption' to 'data-imagelightbox="demo" data-ilb2-caption'
          if(str.indexOf(searchStr) > -1) {  
               $(this).show(); 
          } else {
               $(this).hide(); 
          }
     });
});





$('a[data-imagelightbox="demo"]').imageLightbox({
arrows:true,
button:true,
overlay:true,
caption:true
});

6 Answers

February 23, 2017 10:17pm

First, you cannot submit a form to an HTML page. Forms must be submitted to a page that runs server side code, like PHP or ASP. What I would actually do would be to remove the form line all together, then with jQuery being included in your header, do something like this.

Make sure this is included AFTER your <script src='js/jquery.js'> </script> line.

$('#search').change(function() {
     var searchStr = $(this).val();
     $('.caption').each(function() {
          var str = $(this).attr("data-title"); 
          if(str.indexOf(searchStr) > -1) { //compares search text to title text
               $(this).show(); // if the entry is found show the container
               //or you can do $(this).closest('.image').show();
          } else {
               $(this).hide(); // if not found, hide it.
               //or you can do $(this).closest('.image').hide();
          }
     });
});

February 23, 2017 8:42pm

Below is a simple example of a text search that goes through a list of publications and their titles. The only library included is jquery.

$('.searchBtn').click(function() {
                var title = $('#title').val();  //value from search input box
                $('.pubTitle').each(function() { //searches each container
                    var str = $(this).text(); //finds just the title text
                    if(str.indexOf(title) > -1) { //compares search text to title text
                        $(this).show(); // if the entry is found show the container
                    } else {
                        $(this).hide(); // if not found, hide it.
                    }
                });
            });

February 23, 2017 8:46pm

A search box at the top of the page which should filters photos based on the captions. The photos should filter in real-time as you type, and only display photos that match the search.

February 23, 2017 8:56pm

If all results are already on the page, the above function would work, you'd just need to change the listener to the search input box. $('.pubTitle').each would also need to be updated to the class on your container containing the text you'd like to search. If the results are not on the page and you're looking to do a GET or POST call to a server side page that does a SQL query to a database, you'll want to do something entirely different, I can elaborate if needed.

$('#title').change(function() {
     var title = $(this).val(); ...

February 23, 2017 9:19pm

It is a little hard for me to understand that code without it's HTML , where is the class .searchBtn?, the rest I understand

February 23, 2017 9:24pm

The class searchBtn is a class I have on an actual button that should be pressed for the search to fire. By changing the below from my initial code snippet.

You're looking to change:

$('.searchBtn').click(function() {
var title = $('#title').val();  //value from search input box

$('#title').change(function() { //listens to your input field and fires with any change that happens
var title = $(this).val();  //we are the container, get our value

Hopefully that helps, if not I'll keep trying :)

February 23, 2017 10:00pm

The code does not work: here it's my HTML

</head> <body> <header class='header clearfix'> <form action="index.html" method="post"> <fieldset> <input type="search" id="search" name="user_search" placeholder="Search(16pt)"> </fieldset>

</form>



</header>

    <main class='main clearfix'>


        <div class="photo-gallery clearfix" id='gallery'>

        <div class='image'><a href="img/photos/01.jpg" class='caption' 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>
        </div>

        <div class='image'><a href="img/photos/02.jpg" class='caption' 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>
        </div>


  <div class='image'>
      <a href="img/photos/03.jpg" class='caption' 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>
 </div>


  <div class='image'><a href="img/photos/04.jpg" class='caption' 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>
    </div>


  <div class='image'><a href="img/photos/05.jpg" class='caption' 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>
    </div>


  <div class='image'><a href="img/photos/06.jpg"  class='caption' 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>
 </div>


  <div class='image'><a href="img/photos/07.jpg" class='caption' data-title="I drove past this plantation yesterday, everything is so green!" data-lightbox="picture_one"><img src="img/thumb/07.jpg" alt=""></a>
</div>


  <div class='image'><a href="img/photos/08.jpg" class='caption' 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>
    </div>

  <div class='image'><a href="img/photos/09.jpg" class='caption' data-title="We enjoyed a quiet stroll down this countryside lane." data-lightbox="picture_one"><img src="img/thumb/09.jpg" alt=""></a>
    </div>

  <div class='image'><a href="img/photos/10.jpg" class='caption' 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>

  </div>

  <div class='image'><a href="img/photos/11.jpg" class='caption' 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>

  </div>

  <div class='image'>
      <a href="img/photos/12.jpg" class='caption' 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>
</div>

    </div>

    </main>


    <footer class='footer clearfix'>

    <h5>Treehouse Gallery Project</h5>

    </footer>

    <script src='js/jquery-3.1.1.min.js'></script>
     <script src='js/lightbox/js/lightbox.js'></script>
    <script src='js/jquery.js'> </script>

</body>

What am I doing wrong? The data-title in each div is the content I want to be filtered while typing in the search bar and then show only the images with the same : letter, words or phrases and the rest to be hidden

February 24, 2017 11:03am

After three days of struggle , I finally did it!! Thanks a lot for your patience, you helped me understand JQuery better

February 24, 2017 1:29pm

Glad I could help!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Botos Claudia

Botos Claudia

Jquery Search Filter

Jacob McKinney

Jacob McKinney

Taran Albury

Taran Albury

Jacob McKinney

Jacob McKinney

Taran Albury

Taran Albury

Jacob McKinney

Jacob McKinney

Taran Albury

Taran Albury

6 Answers

Jacob McKinney

Jacob McKinney

Jacob McKinney

Jacob McKinney

Botos Claudia

Botos Claudia

Jacob McKinney

Jacob McKinney

Botos Claudia

Botos Claudia

Jacob McKinney

Jacob McKinney

Botos Claudia

Botos Claudia

Botos Claudia

Botos Claudia

Jacob McKinney

Jacob McKinney