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
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsInteractive Photo Gallery
Hi, I am working on an interactive photo gallery project. I need to use javascript to do the search, I do not want to use a plugin for this.
I am stuck with how I am going to do this. So basically what is supposed to happen is when you type it updates the list and removes list items from the DOM (or hides) if the value does not match any of the image titles or caption. I managed to output the title to the console but I don't know where to go from there.
This is the image HTML
<li><a href="img/01.jpg" data-lightbox="Hay Bales" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="img/thumbnails/01.jpg"></a></li>
<li><a href="img/02.jpg" data-lightbox="Lake" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="img/thumbnails/02.jpg"></a></li>
And this is the Javascript I have so far
$('#search-bar').keyup(function() {
$searchValue = $('#search-bar').val().toLowerCase();
$('li a').each(function(key, value) {
//Gets all the titles of the images
$jimmy = $(this).attr("data-lightbox");
console.log($jimmy);
});
});
2 Answers
oivindberg
Full Stack JavaScript Techdegree Graduate 43,923 PointsHello! :) It was not obvious to me how to get this working.
I came up with this way to solve it
The .indexOf function gives you the index of the first character from the 'searchValue' variable in the 'someText' variable if it exsists or it gives you -1. We can use that to see if it matches:
const dontMatch = someText.indexOf(searchValue) === -1;
My complete solution looks something like this:
// first we get the list items. This is what we will show or hide later
let liTags = $('li');
// As you did, we use the .keyup event to trigger a function every time the user types!
$('#search-bar').keyup(function() {
// I put the value of the serach bar in a constant that is local to the function
const searchValue = $(this).val().toLowerCase();
// Then I go through each of the <li> tags using jQuery's .each method
liTags.each(function() {
// I put the current <li> tag in a constant, so we dont need to look it up more then once.
const currentLiTag = $(this);
// I put the current <a> tag in a constant
const currentATag = currentLiTag.children(":first");
// Then we check if the title does not contain the searchValue.
// .indexOf will return -1 if it does not
if (currentATag.attr('data-title').toLowerCase().indexOf(searchValue) === -1) {
// in that case we hide the <li> element
currentLiTag.hide();
} else {
// otherwise we know the name did mach, so we can show the <li> element.
currentLiTag.show();
}
});
});
oivindberg
Full Stack JavaScript Techdegree Graduate 43,923 PointsIf the string you call .indexOf on is exactly the same as searchValue then, it would log the number 0, becouse .indexOf always returns a number. And indices start from 0 like with arrays.
:)
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsAh I see I see, thanks again!
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsAshley Elson
Front End Web Development Techdegree Student 5,972 PointsThis is wonderful! Thank you for replying and going through the code you wrote.
Say if the
indexof()is exactly likesearchValueand I was toconsole.logthis would it log the exact string or would it just log the number 1?