Question

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

一切都很好，但有一个我无法实现的细节，这在概念上很难甚至是不可能的。当用户将光标移动到另一个输入字段时，或者只是单击窗口的空白点时，我想隐藏建议列表。这不难实现，我只是添加了一个calback OnBlur ;但这打破了 OnClick 项的选择，因为onblur事件在点击之前被触发，然后在onclick事件被触发之前DIV消失...

我考虑在整个窗口上实现onclick回调，然后检查点击发生的位置，但这看起来有点太尴尬和扭曲。有没有人有更好的主意？谢谢！

Answer 1

我正在研究同样的问题，并提出了以下解决方案。自动提示列表隐藏了文件，也可以在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

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

部分解决方案：

在清除autosuggest DIV之前使用函数等待几分之一秒

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

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

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

在查看一些流行的自动提示框时，我没有遇到过一个让你在外面点击时自动提示信息消失的信息，而不是通常会超时并消失。

祝你好运。

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

4 个答案: