How to make a dropdown menu open from a search box only when I click “enter” on keyboard?

Hey guys & gals! I want to be able to open a dropdown menu from a search box only when I tap “enter” on a desktop or mobile keyboard, how can I do it?

Here’s my code:

<!-- Search box -->

<div id=“header-pg” class=“header-pg1”>

<div class=“container-pg”>

<ul id=“header-nav-pg”>

<a><img src=“img/logo-02.jpg” class=“logo”></a>

<a><i class=“fas fa-angle-down”></i></a>

<div class=“container”>

<form class=“input-group”>

<input type=“search” onkeypress=“openDropCustom()” id=“search-btn” class=“form-control” placeholder=“:mag: search…”>






<!-- Dropdown Menu -->

<div class=“bg-modal”>

<div class=“modal-content”>

<a class=“btn-close-popup”>&times;</a>

<h5 class=“title-modal”>Select something</h5>

<div class=“icon-check”>


<!-- Dropdown Menu content (checkbox) -->



<div class=“check-item”>

<input type=“checkbox” name="">

<div class=“icon-box”>



<div class=“check-body”>

<div class=“check-title”>









<!-- Script Dropdown Menu -->

<script type=“text/javascript”>

function openDropCustom(){

document.querySelector(’.bg-modal’).style.display = ‘flex’;



function() {

document.querySelector(’.bg-modal’).style.display = ‘none’;



Thanks a lot!