Авто скрыть окно поиска

Question

При нажатии в правом верхнем углу поля ввода появляется белое поле для поиска местоположения .. моя проблема в том, что после поиска местоположения все работает хорошо, но белое поле не закрывается автоматически ... код ЗДЕСЬ

    function myFunction() {
      document.getElementById("myText").disabled = true;
    }
    
    if ( $(window).width() >= 739) {      
      function openNav() {
      document.getElementById("mySidenav").style.width = "500px";
      document.getElementById("overlay-layer").style.opacity = "1";
      document.getElementById("overlay-layer").style.display = "block";
      }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    
    function closeBox(){
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    } 
    
    
    
    else {
    	function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
      document.getElementById("overlay-layer").style.opacity = "1";
      document.getElementById("overlay-layer").style.display = "block";
      }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    
    function closeBox(){
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("overlay-layer").style.opacity = "0";
      document.getElementById("overlay-layer").style.display = "none";
    }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="mySidenav" class="sidenav" onblur="closebox()">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <input type="text" id="myText" name="myText" placeholder="Street Address, city, state" class="search-box"
                   autocomplete="off" onchange="javascript:SearchLocations();">
            <span class="get-location" onclick="getLocation(); return false">
                <img src="https://img.icons8.com/wired/64/000000/define-location.png">
                <!--<i class="fa fa-bullseye"></i>-->
                <div>Get Current Location <strong>Using GPS</strong></div>
            </span>
        </span>

это сценарий, который я использовал для открытия и закрытия белого ящика .. Я добавил html js n css, который я использовали ..

Answer 1

Вы можете использовать событие при нажатии Enter, которое вызывает закрывающую сторонуNav

Answer 2

Вы можете использовать триггер события (onblur или onchange) и скрывать элемент при срабатывании

Что-то вроде

<ELEMENT id="mySidenav" onblur="closebox()">...</ELEMENT>

Я мог бы помочь в дальнейшем и улучшить мой ответ, если у меня есть элемент mySidenav, это css и эффективный скрипт java, чтобы увидеть, каково его текущее поведение на вашем сайте.