Question

所以我正在为我的网站编写搜索字段的脚本。当用户键入时，字段下方会显示一个包含搜索建议的框。这些建议是键盘可导航和可点击的。

但是，当用户点击页面上的其他位置时，我无法获得建议消失。我在搜索字段中添加了一个onBlur（）处理程序，但是当用户点击其中一个建议时，模糊发生在点击之前，从而使建议框消失，点击事件发生在死区而不是建议。

以下是我的HTML的样子：

<input type="text" id="search_field" onBlur="hideSuggestions()" />
<div id="suggestions_box">
  <ul>
    <li onClick="doSomething(1)">suggestion1</li>
    <li onClick="doSomething(2)">suggestion2</li>
  </ul>
</div>

所以问题是，当焦点离开搜索字段时，如何隐藏suggest_box元素，除了，当有焦点的新元素是建议框时？

Answer 1

将您的建议框div保留在表单标记内，然后将onBlur放在表单上。

<form id="myform" onBlur="hideSuggestions()" >
    <input type="text" id="search_field" />
    <div id="suggestions_box">
        <ul>
          <li onClick="doSomething(1)">suggestion1</li>
          <li onClick="doSomething(2)">suggestion2</li>
        </ul>
    </div>
 </form>

[编辑]我认为这会有效，但现在无法测试。在w3schools上的javascript参考说form标签支持onblur，但我不知道这是否意味着它必须在表单元素上，或者只在表单标签内。[/ edit]

Answer 2

试试这个。

首先确保将blur事件传递给hideSuggestions函数：

<input type="text" id="search_field" onblur="hideSuggestions(event)" />

接下来，检查模糊是否是由建议框内的事件引起的：

function hideSuggestions(event) {
    var target = event.relatedTarget || event.toElement,
        suggestions = document.getElementById('suggestions_box');

    if (contains(suggestions, target))
        // user did something inside suggestions box.
        return; // Do nothing.

    // box hiding code as before...
}

// contains(haystack, needle): fast lookup of whether haystack is a parent of needle.
var contains = document.compareDocumentPosition
             ? function(a, b) { return !!(a.compareDocumentPosition(b) & 16) }
             : function(a, b) { return a !== b && (a.contains ? a.contains(b) : true) };

Answer 3

我遇到了同样的问题并遇到了这个问题。我也在使用jQuery，mouseout似乎是唯一具有relatedTarget的事件。事实上，当前浏览器可能都不支持此功能（仅检查Firefox 4和IE 9）。

我通过在文档上使用mousedown来解决这个问题。我有一个变量表明正在进行搜索。如果在此状态下发生了mousedown，我只检查被点击的目标是否具有某个类，该类仅用于选择建议。在任何其他情况下，建议都会被隐藏。

event.target是一个jQuery元素，你可以在其中查找所有类型的东西，如nodeName，id和className。

$(document).mousedown(function(event) {
if (ongoingSearch) {
    if (event.target.className != "uniqueClassname") {
        hideSuggestions();
    }
}

}）;

Answer 4

这里你可以用css。不需要java脚本。

css将如下。

#search_field:focus+#search_box
{
     display:block;
}
#search_box
{
     display:none;
}

Answer 5

   <input type="text" id="search_field" onBlur="hideSuggestions()" />
    <div id="suggestions_box">
      <ul>
        <li onClick="doSomething(1)">suggestion1</li>
        <li onClick="doSomething(2)">suggestion2</li>
      </ul>
    </div>

您可以在body元素上使用onclick，然后检查建议的显示是否正确处理。

$('body').click(function(e){
   if($('.suggestions_box>ul').is(':visible')) $('.suggestions_box>ul').hide();
})

我有一个例子供你参考（doc truyen）希望它能帮到你

编写搜索建议字段。 Javascript焦点问题

5 个答案: