In the process of creating my inaugural project featuring a collection of images, I wanted to include a filter/search bar at the top. This bar would dynamically filter the displayed pictures based on user input. For example, typing "Aatrox" into the search bar should only display images related to "Aatrox" and not any other unrelated images like "Jayce" or "Senna". The script initially worked fine; I even added a .toLowerCase() function to make it case-insensitive. Additionally, I made the pictures clickable so that each image directs the user to its own respective page. However, after implementing these changes, the search functionality ceased to work.
Below is a snippet of the JavaScript code:
<script>
function search(){
var searchText = (document.getElementById("searchInput").value).toLowerCase();
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if((image.dataset.tags).toLowerCase().indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
</script>
Below is the HTML structure:
<head>
<title> Counterpicks </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Counterpicks pro debily </h1>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<a href="aatrox.html"><img data-tags="aatrox" src="aatrox.webp" alt="Aatrox" class="actionimages"></a>
<a href="ahri.html"><img data-tags="ahri" src="ahri.webp" alt="Ahri" class="actionimages"></a>
</div>
Some lines have been omitted for brevity as they are repeated throughout the code.
Here is an excerpt from the CSS file:
.container {
background: rgba(0,0,0,0);
text-align: center;
margin-left: 20%;
margin-right: 20%;
}
.searchbox {
text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 20px;
}
.image_container {
clear:both;
}
.hide {
display:none;
This being my first project involving JavaScript, I am open to any constructive feedback or criticism.