Как я могу закрыть эту панель поиска, также щелкнув за пределами контейнера?

Question

У меня есть панель поиска, встроенная в верхнюю часть моего сайта, которая открывается после нажатия на значок магнитного стекла. Я получил его, чтобы открыть методом проб и ошибок с js, который я нашел в Интернете, и я также могу закрыть его, нажав X, который находится на панели поиска. Однако я просто не могу понять, как заставить его закрываться всякий раз, когда пользователь также щелкает где-нибудь за пределами целого поискового контейнера, называемого # jas-header.

Ниже приведены скриншоты того, что у меня есть. Фактический сайт - joriebreonn.com - он живой.

Вся строка поиска вверху находится в # jas-header.

Так что я нашел и попытался включить это в js, но мне не повезло, потому что у меня действительно меньше, чем минимальная способность писать js, но иногда мне повезло, и кусочки действительно помогли мне. Я пробовал варианты, но без везения:

      window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

и

$("body").on('click',function(){
   $("#jas-header").hide(); 
});

js, который успешно заставляет окно открываться и закрываться (X - .sf-close), выглядит следующим образом:

claue.HeaderSearchForm = function() {
// Open search form
$( '.sf-open' ).on( 'click', function( e ) {
    e.preventDefault();
    $( this ).next().fadeIn( 0 );
    $( this ).next().find( 'input[type="text"]' );
});
$( '.sf-close' ).on( 'click', function( e ) {
    e.preventDefault();
    $( this ).parent().fadeOut( 0 );
});

Я просто не смог успешно добавить его, чтобы вернуть его к значению по умолчанию (изображение 1), щелкнув также за пределами панели поиска!

Я пытался воспроизвести все в коде, но я даже не смог заставить работать свой код в ручке, так что я действительно в растерянности. Извинения за то, что это, вероятно, очень простой вопрос для большинства из вас, но для меня это кажется просто невозможным! Любая помощь будет высоко ценится.

Большое спасибо, Джори. :)