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

希望有所帮助

Answer 2

尝试将所有元素放在表单中。对于这样的事情：

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

Answer 3

在我看来，最简单的方法是简单地为模糊事件设置超时：

$("#search").blur(function() {
    window.timeout = setTimeout(''+
    '$("#search-results").hide();'+
    'clearTimeout(window.timeout);'+
    'delete window.timeout;'+
    '',150); //makes it impossible to click results
});

这是一个有效的演示http://jsfiddle.net/R4ufB/
您可以单击结果..在控制台中写入一个字符串...并隐藏结果。

此外，如果您需要点击它后链接没有消失，只需在其onclick事件中添加一个检查方法，例如通过向包装器“search-results”div添加一个类：

<a href='#' onclick="$('#search-results').addClass('clicked');console.log('clicked');">Example Result</a>

或者用jQuery将它放在你喜欢的地方：

... js part ...
$('.results').click(function()
{
    $('#search-results').addClass('clicked');
    console.log('clicked');
});

... html part ...
<a href='#' class="results">Example Result</a>

然后将上面的代码更改为：

$("#search").blur(function() {
    window.timeout = setTimeout(''+
    'if (!$("#search-results").hasClass("clicked"))'+
    '    $("#search-results").hide();'+
    'clearTimeout(window.timeout);'+
    'delete window.timeout;'+
    '',150); //makes it impossible to click results
});

这也是一个工作演示： http://jsfiddle.net/awsVd/
单击结果..在控制台中写入一个字符串..结果不会被隐藏。

Answer 4

也许，如：

$('#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();
    }
});

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

4 个答案: