编写带有建议的搜索字段。 Javascript焦点问题答案

【问题标题】：Writing a search-with-suggestions field. Javascript focus problem编写带有建议的搜索字段。 Javascript焦点问题
【发布时间】：2010-11-15 20:15:26
【问题描述】：

所以我正在为我的网站编写一个搜索字段。当用户键入时，该字段下方会出现一个框，其中包含搜索建议。这些建议可通过键盘导航和点击。

但是，当用户单击页面上的其他位置时，我无法让建议消失。我在搜索字段中添加了一个 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>

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

【问题讨论】：

标签： javascript html ajax dhtml

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

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

【讨论】：

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

【讨论】：

谢谢。我认为这通常是正确的解决方案，但我使用的是 jquery，它没有正确设置 relatedTarget 属性（它始终未定义）。有什么解决办法吗？
我相信 jQuery 通常会填充 relatedTarget。但是，我对blur 事件以及jQuery 如何解释IE 中的toElement 知之甚少。这可能是你的问题。

【解决方案3】：

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

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

event.target 是一个 jQuery 元素，您可以在其中查找所有类型的内容，例如 nodeName、id 和 className。

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

});

【讨论】：

【解决方案4】：

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

css 将如下所示。

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

【讨论】：

【解决方案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）希望对你有帮助

【讨论】：