Make Search Box closes if user clicks anywhere?

Question

Currently, the search box opens and closes on clicking the font awesome search icon. But I want the search box closed when the user clicks anywhere inside the body...

My Code:

button.search-open {
    position: absolute;
    z-index: 999;
    background-color: transparent;
    border: none;
    padding: 8px 20px;
    font-size: 20px;
    color: #fff;
    top: 10px;
    margin-left: 1225px;
    border-radius: 4px;
    cursor: pointer;
}

     <button class="search-open">
       <i class="fa fa-search" aria-hidden="true"></i>
       <i class="fa fa-times" aria-hidden="true"></i>
     </button>
    <div class="search-box">
       <form action="<?php echo home_url( '/' ); ?>">
         <h3>Type Here To Search</h3>
           <label>
            <input type="text" name="s" placeholder="Search...">
            <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button>
             </label>
          </form>
         </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(".search-open").click(function() {
            $('.search-box').toggle();
            $('.search-open .fa-search, .search-open .fa-times').toggle();
        });
  });
</script>

Thanks in advance :)

Answer 1

Maybe you can try something like this. Let me know

$(document).ready(function() {
 $('.search-open').click(function(){
    $('.search-box').toggle();
     $('.search-open .fa-search, .fa-times').toggle();
    
});
});

$(document).click(function(event) {
  var $target = $(event.target);
  if(!$target.closest('#search').length &&
  $('.search-box').is(":visible")) {
    $('.search-box').slideToggle();
  }
});

.search-box {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="search">
<button class="search-open">
       <i class="fa fa-search" aria-hidden="true"></i>
       <i class="fa fa-times" aria-hidden="true"></i>
     
</button>
    <div id="search-box" class="search-box" >
       <form action="<?php echo home_url( '/' ); ?>">
         <h3>Type Here To Search</h3>
           <label>
            <input type="text" name="s" placeholder="Search...">
            <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button>
             </label>
          </form>
         </div>
</div>