在失去焦点时隐藏自动完成AJAX控件的建议列表

Question

我正在实现一个AJAX“自动建议”框：用户在输入文本字段中键入字符串，显示带有表格的隐藏div，然后可以单击行或使用上/下箭头滚动列表；同时，焦点仍保持在输入文本字段上。

一切工作都基本正常，但有一个细节我无法实现，这似乎在概念上很困难甚至不可能。我想在用户将光标移动到另一个输入字段或只是单击窗口的空白点时隐藏建议列表。这本身并不难实现，我只需添加一个回调 OnBlur 即可；但这会打破项目 OnClick 的选择，因为在点击之前触发了onblur事件，然后DIV在onclick事件被触发之前消失了...

我考虑在整个窗口上实现一个onclick回调，然后检查单击发生的位置，但这似乎有点笨拙和扭曲。是否有更好的想法？谢谢！

- Francesco Marchetti-Stasi

---

你解决了吗？我现在也遇到了同样的问题，无法找到一个好的解决方案，允许onBlur触发而不破坏清除或鼠标点击选择... - kgstew

有人能回答这个问题吗？我也遇到了同样的问题。 - Abhishek Kamal

当"autosuggest"框因为"blur"事件而隐藏时，我使用了一个技巧，即通过添加setTimeout。但是这个技巧有一个active元素的问题。 - Abhishek Kamal

Answer 1

我正在处理同样的问题，并想出了以下解决方案。单击文档后自动隐藏自动建议列表，这也适用于IE（window.onclick在IE中无法使用）。

document.onclick = function(ev) 
{
    this.hideAutosuggestListDiv();
};

this.hideAutosuggestListDiv = function()
{
    this.div.style.display = 'none';
};

- Bharat Darakh

Answer 2

我曾经遇到过类似的问题，但是想出了一个有点不同的解决方案：

document.onclick = closeSuggest;
function closeSuggest() {
  document.getElementById('suggestions').style.display = "none";
}

function catchTAB(event) {
  if(event.keyCode ==9) {
    closeSuggest();
    document.getElementById('ELEMENT').focus(); //the element that is currently focused
  }
}

希望这能有所帮助

- Jeff

Answer 3

对于使用jquery的人来说，focusout事件触发器非常适用于此：

$('#input-box').focusout(function() {
    $('#suggestions').fadeOut(); 
});

- Varun Jain

Answer 4

我目前正在尝试解决同样的问题。

部分解决方案：

使用一个函数，在清除自动建议 DIV 之前等待几分之一秒。

function pause(milliseconds) {
        var dt = new Date();
        while ((new Date()) - dt <= milliseconds) {  }
}

onBlur="pause(500);clearAutosuggestBox()"

然而，这种解决方案并不优雅，并且在所有浏览器中都无法正常工作。

在查看一些流行的自动建议框时，我没有发现有一个可以在单击外部时使自动建议信息消失的，通常它们会超时并消失。

祝你好运。

- Nathan Lippi

---

我同意，这并不是非常优雅，但比我的想法在整个窗口上使用“onclick”要少尴尬和更容易一些...你为什么认为它不能在所有浏览器中运行？... - Francesco Marchetti-Stasi

嗨，刚看到你的回复...好的，我几天前尝试了这个解决方案，似乎在除了一个浏览器（抱歉，我不记得是哪个）之外的所有浏览器上都可以工作...另外，如果有人的电脑速度很慢，暂停时间就必须更长。 - Nathan Lippi