如何解决当搜索栏退格为空时,如何让我的列表不显示?
每当搜索栏退格为空时,我一直无法让我的项目列表不显示。当您搜索项目并显示它们时,它会起作用。但是,当您退格以清除搜索栏时,它仍会显示整个项目列表!非常感谢您的帮助!
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>
解决方法
您的 javascript 在这里:
if (currentFlav.includes(search)) {
allFlavours[i].style.display = "block";
} else if (currentFlav.value === "") {
flavourList.style.display = "none";
} else {
allFlavours[i].style.display = "none";
}
表示如果当前风味为空,则将风味列表显示为无。
问题在于,当您的搜索是“”时,风味列表已完全填充,因此它永远不会被触发。
您还需要使用 flavourList[0]
访问 flavorList,因为 .getElementsByClassName
返回一个元素数组。 (注意复数 .getElements 不是 .getElement)
为了解决这个问题,我添加了一个检查,说明如果搜索是“”,则让 flavorList 显示为无
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。