在模糊时隐藏自动完成 AJAX 控件的建议列表

Question

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

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

我想关于在整个窗口上实现 onclick 回调，然后检查单击发生的位置，但这似乎有点太尴尬和扭曲。有人有更好的主意吗？谢谢！

Answer 1

我正在研究同样的问题并提出了以下解决方案。自动建议列表隐藏了文档的 onclick，这也适用于 IE（window.onclick 不适用于 IE）。

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

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

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

希望这有帮助

Answer 3

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

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

Answer 4

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

部分解决方案：

使用函数在清除自动建议 DIV 之前等待一小会儿。

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

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

但是，此解决方案并不优雅，并且不适用于所有浏览器。

在查看一些流行的自动建议框时，我还没有遇到一个当您单击外部时使自动建议信息消失的框，而是它们通常会超时并消失。

祝你好运。