關閉搜索對話框

Question

我想關閉搜索結果對話框

下面是代碼：

<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    $('.search-box input[type="text"]').on("keyup input", function(){ 
 
     /* Get input value on change */ 
 
     var inputVal = $(this).val(); 
 
     var resultDropdown = $(this).siblings(".risultato"); 
 
     if(inputVal.length){ 
 
      $.get("http://xxx/testa/backend-search.php", {term: inputVal}).done(function(data){ 
 
       // Display the returned data in browser 
 
       resultDropdown.html(data); 
 
      }); 
 
     } else{ 
 
      resultDropdown.empty(); 
 
     } 
 
    }); 
 

 
    // Set search input value on click of result item 
 
    $(document).on("click", ".risultato", function(){ 
 
     $(this).parents(".ContenitoreRicUser").find('input[type="text"]').val($(this).text()); 
 
     $(this).parent(".ContenitoreRicerca").empty(); 
 
    }); 
 
}); 
 
</script>

<div class="search-box"> 
 
     <input type="text" class="search_keyword" id="field" autocomplete="off" placeholder="Cerca Persone..." /> 
 

 

 
     <div id='result' class="risultato"></div> 
 
    </div>

得到的結果打開一個我無法關閉的窗口，當我點擊網站的任何部分時，我想關閉。

你能幫助我嗎？

Answer 1

你可以做的是創建一個標誌變量，看看是否顯示下拉菜單。然後在文檔上設置一個事件監聽器。如果顯示下拉菜單，則在單擊文檔時將其隱藏。

var dropdownIsShowing = false; 

$('.search-box input[type="text"]').on("keyup input", function(){ 
    //your code here 
    if(inputVal.length){ 

    dropdownIsShowing = true; 
    //your code 
    } 
    //your code 
}); 

$(document).on('click',function(e){ 
    if(dropdownIsShowing){ 
    //hide dropdown 
    $('.risultato').hide(); 
    //change flag 
    dropdownIsShowing = false; 
    } 
});