关闭搜索对话框答案

【问题标题】：Close the search dialog关闭搜索对话框
【发布时间】：2017-08-09 23:46:05
【问题描述】：

我想关闭搜索结果对话框

代码如下：

<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>

结果结果打开了一个我无法关闭的窗口，我想在单击站点的任何部分时关闭。

你能帮帮我吗？

【问题讨论】：

标签： jquery search

【解决方案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;
    }
});

【讨论】：