我的网站有一个搜索按钮,用户可以在其中输入他们想要搜索的内容,网站会删除所有与搜索内容不匹配的产品,并保留与输入的产品名称匹配的所有产品,然后单击搜索按钮后,页面将转到产品部分,显示匹配的搜索产品。我想让用户还可以选择单击计算机上的“Enter”键和手机上的搜索按钮来触发页面向下滚动到网站中的#products 部分的相同效果。
非常感谢我收到的任何帮助,如果需要更多信息或说明,请告诉我。
元素代码
HTML 代码
<div class="icons">
<div class="fas fa-search" id="search-
btn"></div>
<div class="fas fa-bars" id="menu-
btn"></div>
</div>
<div class="search-form">
<input id="searchbar"
onkeyup="search_products()" type="text"
name="search" placeholder="Search
Products">
<a href="#products"><label
for="search-box" class="fas fa-search"></label></a>
</div>
JS代码
function search_products() {
let input =
document.getElementById('searchbar').value
input=input.toLowerCase();
let x =
document.getElementsByClassName('box')
for (i = 0; i < x.length; i++) {
if
(!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
示例代码段
let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.toggle('active');
searchForm.classList.remove('active');
cartItem.classList.remove('active');
}
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () =>{
searchForm.classList.toggle('active');
navbar.classList.remove('active');
cartItem.classList.remove('active');
}
let cartItem = document.querySelector('.cart-items-container');
document.querySelector('#cart-btn').onclick = () =>{
cartItem.classList.toggle('active');
navbar.classList.remove('active');
searchForm.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
searchForm.classList.remove('active');
cartItem.classList.remove('active');
}
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('box')
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root{
--main-color:#6e987c;
--black:#13131a;
--bg:#010103;
--border:.1rem solid rgba(255,255,255,.3);
}
*{
font-family: 'Roboto', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: .8rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background: #fff;
border-radius: 5rem;
}
body{
background: var(--bg);
}
section{
padding:2rem 7%;
}
.heading{
text-align: center;
color:#fff;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}
.heading span{
color:var(--main-color);
text-transform: uppercase;
}
.btn{
margin-top: 1rem;
display: inline-block;
padding:.9rem 3rem;
font-size: 1.7rem;
color:#fff;
background: var(--main-color);
cursor: pointer;
}
.header{
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding:1.5rem 7%;
border-bottom: var(--border);
position: fixed;
top:0; left: 0; right: 0;
z-index: 1000;
}
.header .logo img{
height: 6rem;
}
.header .navbar a{
margin:0 1rem;
font-size: 1.6rem;
color:#fff;
}
.header .navbar a:hover{
color:var(--main-color);
border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.header .icons div{
color:#fff;
cursor: pointer;
font-size: 2.5rem;
margin-left: 2rem;
}
.header .icons div:hover{
color:var(--main-color);
}
#menu-btn{
display: none;
}
.header .search-form{
position: absolute;
top:115%; right: 7%;
background: #fff;
width: 50rem;
height: 5rem;
display: flex;
align-items: center;
transform: scaleY(0);
transform-origin: top;
}
.header .search-form.active{
transform: scaleY(1);
}
.header .search-form input{
height: 100%;
width: 100%;
font-size: 1.6rem;
color:var(--black);
padding:1rem;
text-transform: none;
}
.header .search-form label{
cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color:var(--black);
}
.header .search-form label:hover{
color:var(--main-color);
}
.header .cart-items-container{
position: absolute;
top:100%; right: -100%;
height: calc(100vh - 9.5rem);
width: 35rem;
background: #fff;
padding:0 1.5rem;
}
.header .cart-items-container.active{
right: 0;
}
.header .cart-items-container .cart-item{
position: relative;
margin:2rem 0;
display: flex;
align-items: center;
gap:1.5rem;
}
.header .cart-items-container .cart-item .fa-times{
position: absolute;
top:1rem; right: 1rem;
font-size: 2rem;
cursor: pointer;
color: var(--black);
}
.header .cart-items-container .cart-item .fa-times:hover{
color:var(--main-color);
}
.header .cart-items-container .cart-item img{
height: 7rem;
}
.header .cart-items-container .cart-item .content h3{
font-size: 2rem;
color:var(--black);
padding-bottom: .5rem;
}
.header .cart-items-container .cart-item .content .price{
font-size: 1.5rem;
color:var(--main-color);
}
.header .cart-items-container .btn{
width: 100%;
text-align: center;
}
.home{
min-height: 100vh;
display: flex;
align-items: center;
background:url(../images/backgroundimg.jpeg) no-repeat;
background-size: cover;
background-position: center;
}
.home .content{
max-width: 60rem;
}
.home .content h3{
font-size: 6rem;
text-transform: uppercase;
color:#fff;
}
.home .content p{
font-size: 2rem;
font-weight: lighter;
line-height: 1.8;
padding:1rem 0;
color:#eee;
}
.about .row{
display: flex;
align-items: center;
background:var(--black);
flex-wrap: wrap;
}
.about .row .image{
flex:1 1 45rem;
}
.about .row .image img{
width: 100%;
}
.about .row .content{
flex:1 1 45rem;
padding:2rem;
}
.about .row .content h3{
font-size: 3rem;
color:#fff;
}
.about .row .content p{
font-size: 1.6rem;
color:#ccc;
padding:1rem 0;
line-height: 1.8;
}
.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.menu .box-container .box{
padding:5rem;
text-align: center;
border:var(--border);
}
.menu .box-container .box img{
height: 10rem;
}
.menu .box-container .box h3{
color: #fff;
font-size: 2rem;
padding:1rem 0;
}
.menu .box-container .box .price{
color: #fff;
font-size: 2.5rem;
padding:.5rem 0;
}
.menu .box-container .box .price span{
font-size: 1.5rem;
text-decoration: line-through;
font-weight: lighter;
}
.menu .box-container .box:hover{
background:rgb(35, 36, 38);
}
.productbtn:hover {
background-color: #adefc3;
color: rgb(0, 0, 0);
}
.products .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.products .box-container .box{
text-align: center;
border:var(--border);
padding: 2rem;
}
.products .box-container .box .icons a{
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
border:var(--border);
color:#fff;
margin:.3rem;
}
.products .box-container .box .icons a:hover{
background:var(--main-color);
}
.products .box-container .box .image{
padding: 2.5rem 0;
}
.products .box-container .box .image img{
height: 25rem;
}
.products .box-container .box .content h3{
color:#fff;
font-size: 2.5rem;
}
.products .box-container .box .content .stars{
padding: 1.5rem;
}
.products .box-container .box .content .stars i{
font-size: 1.7rem;
color: var(--main-color);
}
.products .box-container .box .content .price{
color:#fff;
font-size: 2.5rem;
}
.products .box-container .box .content .price span{
text-decoration: line-through;
font-weight: lighter;
font-size: 1.5rem;
}
.review .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.review .box-container .box{
border:var(--border);
text-align: center;
padding:3rem 2rem;
}
.review .box-container .box p{
font-size: 1.5rem;
line-height: 1.8;
color:#ccc;
padding:2rem 0;
}
.review .box-container .box .user{
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .box-container .box h3{
padding:1rem 0;
font-size: 2rem;
color:#fff;
}
.review .box-container .box .stars i{
font-size: 1.5rem;
color:var(--main-color);
}
.contact .row{
display: flex;
background:var(--black);
flex-wrap: wrap;
gap:1rem;
}
.contact .row .map{
flex:1 1 45rem;
width: 100%;
object-fit: cover;
}
.contact .row form{
flex:1 1 45rem;
padding:5rem 2rem;
text-align: center;
}
.contact .row form h3{
text-transform: uppercase;
font-size: 3.5rem;
color:#fff;
}
.contact .row form .inputBox{
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 2rem;
background:var(--bg);
border:var(--border);
}
.contact .row form .inputBox span{
color:#fff;
font-size: 2rem;
padding-left: 2rem;
}
.contact .row form .inputBox input{
width: 100%;
padding:2rem;
font-size: 1.7rem;
color:#fff;
text-transform: none;
background:none;
}
.blogs .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.blogs .box-container .box{
border:var(--border);
}
.blogs .box-container .box .image{
height: 25rem;
overflow:hidden;
width: 100%;
}
.blogs .box-container .box .image img{
height: 100%;
object-fit: cover;
width: 100%;
}
.blogs .box-container .box:hover .image img{
transform: scale(1.2);
}
.blogs .box-container .box .content{
padding:2rem;
}
.blogs .box-container .box .content .title{
font-size: 2.5rem;
line-height: 1.5;
color:#fff;
}
.blogs .box-container .box .content .title:hover{
color:var(--main-color);
}
.blogs .box-container .box .content span{
color:var(--main-color);
display: block;
padding-top: 1rem;
font-size: 2rem;
}
.blogs .box-container .box .content p{
font-size: 1.6rem;
line-height: 1.8;
color:#ccc;
padding:1rem 0;
}
.footer{
background:var(--black);
text-align: center;
}
.footer .share{
padding:1rem 0;
}
.footer .share a{
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color:#fff;
border:var(--border);
margin:.3rem;
border-radius: 50%;
}
.footer .share a:hover{
background-color: var(--main-color);
}
.footer .links{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
gap:1rem;
}
.footer .links a{
padding:.7rem 2rem;
color:#fff;
border:var(--border);
font-size: 2rem;
}
.footer .links a:hover{
background:var(--main-color);
}
.footer .credit{
font-size: 2rem;
color:#fff;
font-weight: lighter;
padding:1.5rem;
}
.footer .credit span{
color:var(--main-color);
}
/* media queries */
@media (max-width:991px){
html{
font-size: 55%;
}
.header{
padding:1.5rem 2rem;
}
section{
padding:2rem;
}
}
@media (max-width:768px){
#menu-btn{
display: inline-block;
}
.header .navbar{
position: absolute;
top:100%; right: -100%;
background: var(--bg);
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar.active{
right:0;
}
.header .navbar a{
color:var(--main-color);
display: block;
margin:3.5rem;
padding:.5rem;
font-size: 2.2rem;
text-align: center;
}
.header .search-form{
width: 90%;
right: 2rem;
}
.home{
background-position: left;
justify-content: center;
text-align: center;
}
.home .content h3{
font-size: 4.5rem;
}
.home .content p{
font-size: 1.5rem;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header section starts -->
<header class="header">
<div class="icons">
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-bars" id="menu-btn"></div>
</div>
<div class="search-form">
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products">
<a href="#products"><label for="search-box" class="fas fa-search"></label></a>
</div>
</header>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<section class="menu" id="products">
<h1 class="heading"> our <span>Products</span> </h1>
<div class="box-container">
<div class="box">
<img src="images/raworganiclogo.png" alt="porn">
<h3>Raw Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/mylelogomain-removebg-preview.png" alt="">
<h3>Myle</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/oozelogo.png" alt="">
<h3>Ooze Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/airlogologo1.png" alt="">
<h3>Air Bar Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/pipesandbowls.png" alt="">
<h3>Pipe & Bowls</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/hookahlogo.png" alt="">
<h3>Hookah Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/Clipperlogo.png" alt="">
<h3>Clipper Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/biclogo.png" alt="">
<h3>Bic Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/elementslogo.png" alt="">
<h3>Elements Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/hydelogo.png" alt="">
<h3>Hyde Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/elementslogo.png" alt="">
<h3>Elements Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/puffbarlogo.png" alt="">
<h3>Puff Bar Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/realfloomfame-removebg-preview.png" alt="">
<h3>Flum Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/bobmarleylogo.png" alt="">
<h3>Bob Marley Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
<div class="box">
<img src="images/weedgrinders-removebg-preview.png" alt="">
<h3>Grinders Products</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn productbtn">View Collection</a>
</div>
</div>
</section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
也可以按 Enter 键进行搜索。
最佳答案
function Onpress(e){
let pressedkey=(window.event)?event.charCode:e.which;
if(pressedkey == 13){
search_products();
// your logic
}
}
并将 onkeypress 事件添加到输入中,例如
Onkeypress="Onpress(event)"
关于javascript - 当用户单击键盘上的 Enter 时触发按钮单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71805877/