Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a day ago

How can I hide the search box when clicking outside of its element but leave it visible when clicking inside (excluding certain inputs and buttons)?

Here is a modified version of the paragraph: I have created a search box using the following code. However, when I click inside the search box or on the inputs, the search box closes instead of staying open. I want the search box to close only when I click outside the search box. Could you help me identify the mistake in my code? Thank you in advance for your assistance!

Below is the JavaScript, CSS, and HTML code for the search box:

const searchIcon = document.querySelector("#searchIcon");
const searchContent = document.querySelector(".searchForm--content");
searchIcon.addEventListener("click", function() {
    searchContent.classList.toggle("active");
});

window.onclick = function(event) {
  if (!event.target.matches('#searchIcon') ) {    
   var searchContent=document.querySelector(".searchForm--content");
     var searchFormInput=document.querySelector(".searchForm--content.active > .searchForm--contentinput");
     if(searchContent.classList.contains('active') && !event.target.contains(searchFormInput)){
          searchContent.classList.remove('active');
      }
  }
}
.searchForm--content{
    position: relative
}

#searchIcon{
  background-color: green;
  color: white;
  padding: 12px;
  width: fit-content;
}

.searchForm > img {
  cursor: pointer;
  width: auto;
  vertical-align: middle;
}

.searchForm--content{
  border: 1px solid blue;
  border-radius: 10px;
  padding-inline:0.75rem;
  color: black;
  position: absolute;
  left: 12px;
  width: 40%;
  top: 70px;
  display: none;
  align-items: center;
  justify-content: space-between;
}
.searchForm--content.active {
  display: flex;
} 

.searchForm--content .btn{
    position: absolute;
    left:0.2rem;
    top:50%;
    transform: translatey(-50%);
}
.searchForm--content input[type="search"]{
    width: 65%;
    border: 1px solid red;
    padding: 1rem 0.5rem;
    color: black;
  margin-left: auto;
}
<form class="searchForm" role="search">
  <div id="searchIcon">my icon search</div>
  
    <div class="searchForm--content" id="my-box">
        <input type="search" placeholder="search" name="s" inputmode="search"  class="searchForm--contentinput" /> 
        <button type="submit" class="btn btn--blue" >submit</button>
    </div>
</form>
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
The issue with your code is that the window.onclick event listener is being triggered every time you click anywhere in the window, including inside the search box. You can solve this issue by checking if the clicked target is inside the search box or not. Here's the corrected code with comments explaining the changes: 
const searchIcon = document.querySelector("#searchIcon");
const searchContent = document.querySelector(".searchForm--content");

searchIcon.addEventListener("click", function() {
  searchContent.classList.toggle("active");
});

window.onclick = function(event) {
  if(!searchIcon.contains(event.target) && !searchContent.contains(event.target)) {
    // Check if the clicked target is not inside the search box or the search icon
    searchContent.classList.remove("active");
  }
};
In this updated code, we are using the contains() method to check if the clicked target is inside the search box or the search icon. If the clicked target is not inside either of them, we remove the active class from the search box to hide it. I hope this helps! Let me know if you have any other questions.
;