关闭搜索对话框

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;
    }
});