5

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

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

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

4

4 回答 4

2

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

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

this.hideAutosuggestListDiv = function()
{
    this.div.style.display = 'none';
};
于 2012-10-17T07:21:28.750 回答
1

我有一个类似的问题，但想出了一些不同的解决方案：

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

希望这可以帮助

于 2011-06-22T05:18:58.013 回答
1

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

$('#input-box').focusout(function() {
    $('#suggestions').fadeOut(); 
});
于 2014-02-08T15:38:05.080 回答
0

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

部分解决方案：

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

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

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

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

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

祝你好运。

于 2011-05-05T19:07:19.533 回答