除非单击该元素，否则如何隐藏模糊元素？

Question

我正在尝试使用 jQuery 设置自动完成搜索表单。
我想在字段未聚焦时隐藏搜索结果 div，但是如果有人尝试单击结果中的链接，他们将无法点击，因为它会立即隐藏，因为搜索字段失去了焦点。
这是代码：

HTML：

<form>
  <input type='search' id='search' placeholder='search' />
</form>
<div id='search-results' style='display:none'>
  <ul>
    <li><a href='#'>Example Result</a></li>
  </ul>
</div>

JavaScript

$("#search").keyup(function() {
  query = $(this).val();
  if(query.length > 2) {
    $("#search-results").html(get_search_results(query)).show();
  } else {
    $("#search-results").hide();
  }
});

$("#search").focus(function() {
  if($(this).val().length > 2) {
    $("#search-results").show();
  }
}); 

$("#search").blur(function() {
  $("#search-results").hide(); //makes it impossible to click results
});

如何在不使用时隐藏结果，但仍然可以点击它们？

Answer 1

我建议设置一个函数来检查鼠标是否在搜索结果 div 上。像这样。

// Have a global variable
var hovered = false;

然后有一个在翻转时改变它的功能

$("#search-results").bind("mouseover",function() {
    hovered = true;
}).bind("mouseout",function() {
    hovered = false;
});

然后在您的函数中检查变量是否为真

$("#search").blur(function() {
    if(!hovered) {
        $("#search-results").hide();
    }
    else {
        $("#search-results").bind("mouseup",function() {
            $("#search-results").hide();
        })
    }
});

希望有帮助