Exit search box by clicking anywhere else on screen

Question

I built a sliding down search box. When you press the search icon a search box drops down, and if you press the search icon the search box will disappear again. I want another way for people to exit the search box besides just clicking on the search icon again. I also want to be able to exit the search box by clicking anywhere else on the screen besides the search box. How would I do this?

jsfiddle - https://jsfiddle.net/pkhj0frp/

jQuery('.search-icon').on('click', function() {
  jQuery('.search-form').toggleClass('search-visible');
});

/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
  float: right;
  line-height: 70px;
  cursor: pointer;
  margin: 0px 34px;
}

.search-form {
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out 250ms ease;
  -moz-transition: all .3s ease-in-out 250ms ease;
  -ms-transition: all .3s ease-in-out 250ms ease;
  -o-transition: all .3s ease-in-out 250ms ease;
  transition: all .3s ease-in-out 250ms ease;
  background: #fff;
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: calc((100vw - 1200px) / 2);
  padding-right: calc((100vw - 1200px) / 2);
  position: absolute;
  top: calc(20% + 1px);
  transform: translateX(-50%);
  left: 50%;
  width: 100vw;
}

.search-form.search-visible {
  opacity: 1;
  height: 110px;
}

.search-form.search-form-permanent {
  border-bottom: none;
  height: 100px !important;
  left: 0;
  opacity: 1 !important;
  padding: 0;
  position: relative;
  transform: none;
  width: 100%;
  z-index: 5;
}

.search-form.search-form-permanent .input-group {
  padding: 0;
  top: 0;
}

.search-form.search-form-permanent .button-search {
  color: #33f;
  outline: none;
}

.search-form.search-form-permanent .button-search:hover {
  color: #b4c5cd;
}

.search-form .input-group {
  margin-left: 18px;
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.search-form .form-control {
  background: #fff;
  border: none;
  border-bottom: 1px #000 solid;
  border-radius: 0;
  box-shadow: none;
  float: left;
  height: auto;
  padding: 0;
  outline: none !important;
  width: calc(100% - 36px) !important;
  font-size: 50px;
  font-family: 'freightlight';
  font-style: italic;
  text-transform: uppercase;
  color: #000;
  box-shadow: none !important;
  border-color: inherit !important;
  -webkit-box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.search-form .form-control:focus {
  background: #fff !important;
  box-shadow: none !important;
  border-color: inherit !important;
  -webkit-box-shadow: none !important;
}

.search-form .button-search {
  background: transparent;
  border: none;
  float: right;
  font-size: 1.4em;
  padding: 6px 0 0 0;
  width: 36px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <div class="input-group">
    <input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
    <button type="submit" class="button-search icon-search"></button>
  </div>
</form>

Answer 1

I create exit the search box by clicking anywhere else on the screen and keypress shortcut.

jQuery('.search-icon').on('click', function(e) {
  e.stopPropagation();
  jQuery('.search-form').toggleClass('search-visible');
});

$(window).bind('keydown', function(e) {
  e.preventDefault()
  var keyCode = e.keyCode || e.which;
  if (keyCode == 117) {
    $('.search-form').toggleClass('search-visible');
  }
});

$(document).click(function() {
  $('.search-form').removeClass('search-visible');
})