I am trying to create a search script using jQuery. I am trying to make the search box filter photos based on their respective caption and the should photos filter in real-time as you type, and the displayed photos should match the search. Here is my HTML and Javascript code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/css/lightbox.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images-container">
<a href= "photos/01.jpg" data-alt="Hay Bales"data-lightbox="image-1" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="photos/thumbnails/01.jpg" alt="Image 1"></a>
<a href= "photos/02.jpg" data-alt ="Lake"data-lightbox="image-1" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="photos/thumbnails/02.jpg" alt="Image 2"></a>
<a href= "photos/03.jpg" data-alt="Canyon"data-lightbox="image-1" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="photos/thumbnails/03.jpg" alt="Image 3"></a>
<a href= "photos/04.jpg" data-alt="Iceberg"data-lightbox="image-1" data-title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today. "><img src="photos/thumbnails/04.jpg" alt="Image 4"></a>
<a href= "photos/05.jpg" data-alt="Desert"data-lightbox="image-1" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="photos/thumbnails/05.jpg" alt="Image 5"></a>
<a href= "photos/06.jpg" data-alt="Fall"data-lightbox="image-1" data-title="Fall is coming, I love when the leaves on the trees start to change color."><img src="photos/thumbnails/06.jpg" alt="Image 6"></a>
<a href= "photos/07.jpg" data-alt="Plantation"data-lightbox="image-1" data-title="I drove past this plantation yesterday, everything is so green!"><img src="photos/thumbnails/07.jpg" alt="Image 7"></a>
<a href= "photos/08.jpg" data-alt="Dunes"data-lightbox="image-1" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="photos/thumbnails/08.jpg" alt="Image 8"></a>
<a href= "photos/09.jpg" data-alt="Countryside Lane"data-lightbox="image-1" data-title="We enjoyed a quiet stroll down this countryside lane."><img src="photos/thumbnails/09.jpg" alt="Image 9"></a>
<a href= "photos/10.jpg" data-alt="Sunset"data-lightbox="image-1" data-title="Sunset at the coast! The sky turned a lovely shade of orange."><img src="photos/thumbnails/10.jpg" alt="Image 10"></a>
<a href= "photos/11.jpg" data-alt="Cave"data-lightbox="image-1" data-title="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="photos/thumbnails/11.jpg" alt="Image 11"></a>
<a href= "photos/12.jpg" data-alt="Blueballs"data-lightbox="image-1" 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."><img src="photos/thumbnails/12.jpg" alt="Image 12"></a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/js/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
$("#site-search").keyup(function() {
let searchInput=$("#site-search").val().toLowerCase();
$('a').each(function(element){
let caption=$(element).attr('data-title').toLowerCase();
if (caption.includes(searchInput)) {
$(element).show();
}
});
});
For some reason I am getting an error saying that toLowercase is undefined. Why is that? Could you guys make suggestions to my code to fix the error? I'm kinda stuck and don't know if I'm on the right track or not.
The first parameter of each is not the object. It is the index. You can use this (or add a second parameter) instead of element variable.
$("#site-search").keyup(function() {
let searchInput = $("#site-search").val().toLowerCase();
$('.images-container > a').each(function(index, element) {
let caption = $(element).attr('data-title').toLowerCase();
if (caption.includes(searchInput)) {
$(element).show();
} else {
$(element).hide(); //Hide elements that dont include the search word.
}
});
});
$("#site-search").keyup(function() {
let searchInput = $("#site-search").val().toLowerCase();
$('.images-container > a').each(function(index, element) {
let caption = $(element).attr('data-title').toLowerCase();
if (caption.includes(searchInput)) {
$(element).show();
} else {
$(element).hide(); //Hide elements that dont include the search word.
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="site-search" placeholder="Search(16pt)">
<div class="images-container">
<a href="photos/01.jpg" data-alt="Hay Bales" data-lightbox="image-1" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="photos/thumbnails/01.jpg" alt="Image 1"></a>
<a href="photos/02.jpg" data-alt="Lake" data-lightbox="image-1" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="photos/thumbnails/02.jpg" alt="Image 2"></a>
<a href="photos/03.jpg" data-alt="Canyon" data-lightbox="image-1" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="photos/thumbnails/03.jpg" alt="Image 3"></a>
<a href="photos/04.jpg" data-alt="Iceberg" data-lightbox="image-1" data-title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today. "><img src="photos/thumbnails/04.jpg" alt="Image 4"></a>
<a href="photos/05.jpg" data-alt="Desert" data-lightbox="image-1" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="photos/thumbnails/05.jpg" alt="Image 5"></a>
<a href="photos/06.jpg" data-alt="Fall" data-lightbox="image-1" data-title="Fall is coming, I love when the leaves on the trees start to change color."><img src="photos/thumbnails/06.jpg" alt="Image 6"></a>
<a href="photos/07.jpg" data-alt="Plantation" data-lightbox="image-1" data-title="I drove past this plantation yesterday, everything is so green!"><img src="photos/thumbnails/07.jpg" alt="Image 7"></a>
<a href="photos/08.jpg" data-alt="Dunes" data-lightbox="image-1" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="photos/thumbnails/08.jpg" alt="Image 8"></a>
<a href="photos/09.jpg" data-alt="Countryside Lane" data-lightbox="image-1" data-title="We enjoyed a quiet stroll down this countryside lane."><img src="photos/thumbnails/09.jpg" alt="Image 9"></a>
<a href="photos/10.jpg" data-alt="Sunset" data-lightbox="image-1" data-title="Sunset at the coast! The sky turned a lovely shade of orange."><img src="photos/thumbnails/10.jpg" alt="Image 10"></a>
<a href="photos/11.jpg" data-alt="Cave" data-lightbox="image-1" data-title="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="photos/thumbnails/11.jpg" alt="Image 11"></a>
<a href="photos/12.jpg" data-alt="Blueballs" data-lightbox="image-1" 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."><img src="photos/thumbnails/12.jpg" alt="Image 12"></a>
</div>Option 2: Or you can use filter to filter the a elements, like:
$("#site-search").keyup(function() {
let searchInput = $("#site-search").val().toLowerCase();
$('.images-container > a').hide().filter(function() {
return $(this).attr('data-title').toLowerCase().includes(searchInput);
}).show();
});
$("#site-search").keyup(function() {
let searchInput = $("#site-search").val().toLowerCase();
$('.images-container > a').hide().filter(function() {
return $(this).attr('data-title').toLowerCase().includes(searchInput);
}).show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="site-search" placeholder="Search(16pt)">
<div class="images-container">
<a href="photos/01.jpg" data-alt="Hay Bales" data-lightbox="image-1" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."><img src="photos/thumbnails/01.jpg" alt="Image 1"></a>
<a href="photos/02.jpg" data-alt="Lake" data-lightbox="image-1" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here."><img src="photos/thumbnails/02.jpg" alt="Image 2"></a>
<a href="photos/03.jpg" data-alt="Canyon" data-lightbox="image-1" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="photos/thumbnails/03.jpg" alt="Image 3"></a>
<a href="photos/04.jpg" data-alt="Iceberg" data-lightbox="image-1" data-title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today. "><img src="photos/thumbnails/04.jpg" alt="Image 4"></a>
<a href="photos/05.jpg" data-alt="Desert" data-lightbox="image-1" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="photos/thumbnails/05.jpg" alt="Image 5"></a>
<a href="photos/06.jpg" data-alt="Fall" data-lightbox="image-1" data-title="Fall is coming, I love when the leaves on the trees start to change color."><img src="photos/thumbnails/06.jpg" alt="Image 6"></a>
<a href="photos/07.jpg" data-alt="Plantation" data-lightbox="image-1" data-title="I drove past this plantation yesterday, everything is so green!"><img src="photos/thumbnails/07.jpg" alt="Image 7"></a>
<a href="photos/08.jpg" data-alt="Dunes" data-lightbox="image-1" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!"><img src="photos/thumbnails/08.jpg" alt="Image 8"></a>
<a href="photos/09.jpg" data-alt="Countryside Lane" data-lightbox="image-1" data-title="We enjoyed a quiet stroll down this countryside lane."><img src="photos/thumbnails/09.jpg" alt="Image 9"></a>
<a href="photos/10.jpg" data-alt="Sunset" data-lightbox="image-1" data-title="Sunset at the coast! The sky turned a lovely shade of orange."><img src="photos/thumbnails/10.jpg" alt="Image 10"></a>
<a href="photos/11.jpg" data-alt="Cave" data-lightbox="image-1" data-title="I did a tour of a cave today and the view of the landscape below was breathtaking."><img src="photos/thumbnails/11.jpg" alt="Image 11"></a>
<a href="photos/12.jpg" data-alt="Blueballs" data-lightbox="image-1" 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."><img src="photos/thumbnails/12.jpg" alt="Image 12"></a>
</div>