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

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

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

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

来源

2011-05-05 Francesco Marchetti-Stasi

你有没有想出解决办法？我现在有这个问题，并不能找出一个很好的解决方案，让onBlur没有打破清除或鼠标点击选择触发... – kgstew 2016-02-05 02:05:57

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

部分解决：

使用功能等待几分之一秒清除自动提示DIV

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

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

然而之前，这个解决方案是不优雅，它不会在所有的浏览器。

在寻找一些流行的autosuggest盒子时，我没有遇到过一个让你在外面点击时自动提示信息消失的问题，而他们通常会超时消失。

祝你好运。

来源

2011-05-05 19:07:19

我同意，它不是很优雅，仍然不那么尴尬，比我更容易在完整的窗口上的“onclick”的想法... 为什么你认为它不会在所有的浏览器工作？... – 2011-05-06 11:55:31

嗨，刚刚看到你的回应...嗯，我试了几天这个解决方案以前，它似乎适用于除一个之外的所有浏览器（对不起，我不记得是哪一个）......而且，如果某人的电脑速度较慢，那么暂停时间必须更长。 – 2011-05-09 02:47:03

我有一个问题simular但有点不同的解决方案中提出了：

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-22 05:18:58 Jeff

我工作的同样的问题，并与下面的解决方案上来。 Autosuggest列表隐藏onclick也在IE中工作的文件（window.onclick在IE中不起作用）。

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

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

来源

2012-10-17 07:21:28 user1688640

对于那些使用jQuery的focusout事件触发完全适用此：

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

来源

2014-02-08 15:38:05

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

回答

相关问题