如何在模糊上隐藏元素，除非单击该元素？

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

然后在函数中检查变量是否为true。

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

希望这有帮助

Answer 2

也许，就像：

$('#search').data("wait_a_bit", false);
$("#search").blur(function()
{
    if (!$(this).data("wait_a_bit"))
       $("#search-results").hide();
});

$("#search-results").mousedown(function() {
    $("#search").data("wait_a_bit", true);
});

$("#search-results").bind("mouseup mouseleave", function() {
    if ($("#search").data("wait_a_bit"))
    {
        $("#search").data("wait_a_bit", false);
       $("#search-results").hide();
    }
});

Answer 3

尝试将所有元素放入表单中。像这样的事情：

<div id="wrapper">
    <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>

并将隐藏代码更改为：

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