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

【问题标题】：Hiding the suggestion list of an autocomplete AJAX control on blur在模糊中隐藏自动完成 AJAX 控件的建议列表
【发布时间】：2011-08-19 05:41:33
【问题描述】：

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

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

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

【问题讨论】：

你有没有想过这个问题？我现在遇到了这个问题，无法找到一个好的解决方案来允许 onBlur 在不破坏清除或鼠标单击选择的情况下触发......
谁能回答这个问题，我也有同样的问题。
当“自动建议”框被blur 事件隐藏时，我使用了一个技巧，即添加setTimeout。 但是这个技巧有active自动提示框元素的问题。

标签： ajax autocomplete onblur

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

希望对你有帮助

【讨论】：

【解决方案4】：

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

部分解决方案：

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

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

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

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

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

祝你好运。

【讨论】：

我同意，它不是很优雅，但比我在整个窗口上的“onclick”的想法更不尴尬和更容易......为什么你认为它不适用于所有浏览器？ ...
嗨，刚刚看到你的回复......好吧，我几天前尝试了这个解决方案，它似乎适用于除一个之外的所有浏览器（抱歉，我不记得是哪个）...... . 另外，如果某人的计算机速度很慢，则暂停时间必须更长。