Trigger a button click when user clicks Enter on keyboard-CodePudding

my website has a search button where a user can type in what they want to search for and the website removes all of the products that don't match what was searched and leaves all of the products that match the product name typed in, and then once the search button is clicked, the page goes down to the products section showing the matching searched products. I want to make it so that users also have the option to click the 'Enter' key on their computers and the search button on their phones to trigger the same effect where the page scrolls down to the #products section in the website.

I appreciate any help that I receive and just let me know if more information or clarification is needed.

Project Code

HTML Code

         <div >
                <div  id="search- 
btn"></div>
                <div  id="menu- 
btn"></div>
            </div>

            <div >
                <input id="searchbar" 
onkeyup="search_products()" type="text"
                name="search" placeholder="Search 
Products">
                <a href="#products"><label 
for="search-box" ></label></a>
            </div>

JS Code

        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";                 
                }
            }
        }

Example Snippet

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 >


   

                <div >
                    <div  id="search-btn"></div>
                    <div  id="menu-btn"></div>
                </div>

                <div >
                    <input id="searchbar" onkeyup="search_products()" type="text"
                    name="search" placeholder="Search Products">
                    <a href="#products"><label for="search-box" ></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  id="products">

    <h1 > our <span>Products</span> </h1>

    <div >

        <div >
            <img src="images/raworganiclogo.png" alt="porn">
            <h3>Raw Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/mylelogomain-removebg-preview.png" alt="">
            <h3>Myle</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/oozelogo.png" alt="">
            <h3>Ooze Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/airlogologo1.png" alt="">
            <h3>Air Bar Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/pipesandbowls.png" alt="">
            <h3>Pipe & Bowls</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/hookahlogo.png" alt="">
            <h3>Hookah Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/Clipperlogo.png" alt="">
            <h3>Clipper Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/biclogo.png" alt="">
            <h3>Bic Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/elementslogo.png" alt="">
            <h3>Elements Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/hydelogo.png" alt="">
            <h3>Hyde Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/elementslogo.png" alt="">
            <h3>Elements Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/puffbarlogo.png" alt="">
            <h3>Puff Bar Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/realfloomfame-removebg-preview.png" alt="">
            <h3>Flum Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/bobmarleylogo.png" alt="">
            <h3>Bob Marley Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >View Collection</a>
        </div>

        <div >
            <img src="images/weedgrinders-removebg-preview.png" alt="">
            <h3>Grinders Products</h3>
            <div >$15.99 <span>20.99</span></div>
            <a href="#" >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>

hit enter in order to search as well.

CodePudding user response：

function Onpress(e){
  let pressedkey=(window.event)?event.charCode:e.which;
  if(pressedkey == 13){
    search_products();
    // your logic
  }
}

And add onkeypress event into input like

Onkeypress="Onpress(event)"

CodePudding user response：

Use Input Change Event

Just use the input change event as it triggers on the enter key. The advantages over keypress and keydown events is that you don't need the extra step of checking for enter key.

search.addEventListener("change", function(e) {

  console.log("Showing products matching keyword: "   search.value );

});

<input id="search" type="text" placeholder="keyword search..." />

CodePudding user response：

function searchProduct(){
  alert("Your product code goes here")
}

var input = document.querySelector("#search-input");
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    searchProduct()
  }
});

document.querySelector("#search-btn").addEventListener("click", searchProduct);

<input id="search-input">
<button id="search-btn">Search</button>

CodePudding user response：

You can use this code

document.getElementById("searchbar").addEventListener("keydown", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
        search_products()
    }
});