I've been having trouble with getting my list of items to NOT display whenever the search bar is backspaced to empty. It works when you're searching for the items and they display. However, when you backspace to clear the searchbar, it still shows the whole list of items! Your help is greatly appreciated!
const flavoursBtn = document.getElementById("flavoursBtn");
const flavDropdown = document.getElementById("flavDropdown");
const flavourInput = document.getElementById("flavourInput");
const flavourList = document.getElementsByClassName("flavourList");
flavoursBtn.addEventListener("click", function () {
flavDropdown.classList.toggle("show");
});
flavourInput.addEventListener("keyup", function (event) {
let search = event.target.value.toLowerCase();
let allFlavours = document.getElementsByClassName("flavour");
for (let i = 0; i < allFlavours.length; i++) {
const currentFlav = allFlavours[i].textContent.toLowerCase();
if (currentFlav.includes(search)) {
allFlavours[i].style.display = "block";
} else if (currentFlav.value === "") {
flavourList.style.display = "none";
} else {
allFlavours[i].style.display = "none";
}
}
});body {
background: linear-gradient(to right, #fdfc47, #24fe41);
font-family: "Cabin", Sans-Serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto Condensed", Sans-Serif;
font-weight: 700;
}
h1 {
font-size: 3.125rem;
color: #8738d6;
text-shadow: 2px 2px 5px #af64ea;
margin: 0;
}
p {
font-size: 1.125rem;
color: white;
text-shadow: 2px 2px 5px #af64ea;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 80vw;
height: 100vh;
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
/* border: 2px solid red; */
}
.box {
/* border: 1px solid red; */
display: flex;
}
.a {
grid-column: 1 / 3;
grid-row: 1 /2;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding-top: 25%;
}
.b {
grid-column: 3;
grid-row: 1 / 2;
justify-content: center;
align-items: center;
}
#flavoursBtn {
background-color: #8738d6;
border-radius: 10px;
color: #24fe41;
cursor: pointer;
padding: 10px 20px;
border: none;
outline-color: #af64ea;
box-shadow: 2px 2px 5px #af64ea;
text-shadow: 1px 1px 1px #fdfc47;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content li {
color: #8738d6;
padding: 3px 0;
text-decoration: none;
display: none;
}
input[type="text"] {
min-width: 250px;
padding: 5px 15px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #af64ea;
outline-color: #af64ea;
box-sizing: border-box;
font-family: "Cabin", Sans-Serif;
color: #8738d6;
}
::-webkit-input-placeholder {
/* Edge */
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
::placeholder {
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
.show {
display: block;
}
.hide {
display: none;
}<div class="container">
<div class="box a">
<div class="dropdown">
<button id="flavoursBtn">Flavours</button>
<div id="flavDropdown" class="dropdown-content">
<input type="text" placeholder="Search..." id="flavourInput">
<div class="flavours">
<ul class="flavourList">
<li class="flavour">Vanilla</li>
<li class="flavour">Chocolate</li>
<li class="flavour">Cookies n' Cream</li>
<li class="flavour">Chocolate Chip Cookie Dough</li>
<li class="flavour">Peanut Butter Banana</li>
<li class="flavour">Pistachio</li>
<li class="flavour">Birthday Cake</li>
<li class="flavour">Cotton Candy</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box b">
<img src="https://i.ibb.co/82X9tP7/Scoops.png" alt="Scoops" alt="yummy looking purple ice cream">
</div>
</div>Your javascript here:
if (currentFlav.includes(search)) {
allFlavours[i].style.display = "block";
} else if (currentFlav.value === "") {
flavourList.style.display = "none";
} else {
allFlavours[i].style.display = "none";
}
is saying if the current flavour is blank display the flavourList as none.
The problem with that is that flavour list is fully populated when your search is "" so it is never fired.
You also need to access flavourList using flavourList[0] as .getElementsByClassName returns an array of elements. (Note the plural .getElements not .getElement)
To fix, I have added a check that says if the search is "" make flavourList display as none
const flavoursBtn = document.getElementById("flavoursBtn");
const flavDropdown = document.getElementById("flavDropdown");
const flavourInput = document.getElementById("flavourInput");
const flavourList = document.getElementsByClassName("flavourList");
flavoursBtn.addEventListener("click", function () {
flavDropdown.classList.toggle("show");
});
flavourInput.addEventListener("keyup", function (event) {
let search = event.target.value.toLowerCase();
let allFlavours = document.getElementsByClassName("flavour");
if(search === "") {
flavourList[0].style.display = "none";
return;
} else {
flavourList[0].style.display = "block";
}
for (let i = 0; i < allFlavours.length; i++) {
const currentFlav = allFlavours[i].textContent.toLowerCase();
if (currentFlav.includes(search)) {
allFlavours[i].style.display = "block";
} else {
allFlavours[i].style.display = "none";
}
}
});body {
background: linear-gradient(to right, #fdfc47, #24fe41);
font-family: "Cabin", Sans-Serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto Condensed", Sans-Serif;
font-weight: 700;
}
h1 {
font-size: 3.125rem;
color: #8738d6;
text-shadow: 2px 2px 5px #af64ea;
margin: 0;
}
p {
font-size: 1.125rem;
color: white;
text-shadow: 2px 2px 5px #af64ea;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 80vw;
height: 100vh;
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
/* border: 2px solid red; */
}
.box {
/* border: 1px solid red; */
display: flex;
}
.a {
grid-column: 1 / 3;
grid-row: 1 /2;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding-top: 25%;
}
.b {
grid-column: 3;
grid-row: 1 / 2;
justify-content: center;
align-items: center;
}
#flavoursBtn {
background-color: #8738d6;
border-radius: 10px;
color: #24fe41;
cursor: pointer;
padding: 10px 20px;
border: none;
outline-color: #af64ea;
box-shadow: 2px 2px 5px #af64ea;
text-shadow: 1px 1px 1px #fdfc47;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content li {
color: #8738d6;
padding: 3px 0;
text-decoration: none;
display: none;
}
input[type="text"] {
min-width: 250px;
padding: 5px 15px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #af64ea;
outline-color: #af64ea;
box-sizing: border-box;
font-family: "Cabin", Sans-Serif;
color: #8738d6;
}
::-webkit-input-placeholder {
/* Edge */
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
::placeholder {
color: #8738d6;
font-family: "Cabin", Sans-Serif;
}
.show {
display: block;
}
.hide {
display: none;
}<div class="container">
<div class="box a">
<div class="dropdown">
<button id="flavoursBtn">Flavours</button>
<div id="flavDropdown" class="dropdown-content">
<input type="text" placeholder="Search..." id="flavourInput">
<div class="flavours">
<ul class="flavourList">
<li class="flavour">Vanilla</li>
<li class="flavour">Chocolate</li>
<li class="flavour">Cookies n' Cream</li>
<li class="flavour">Chocolate Chip Cookie Dough</li>
<li class="flavour">Peanut Butter Banana</li>
<li class="flavour">Pistachio</li>
<li class="flavour">Birthday Cake</li>
<li class="flavour">Cotton Candy</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box b">
<img src="https://i.ibb.co/82X9tP7/Scoops.png" alt="Scoops" alt="yummy looking purple ice cream">
</div>
</div>