Question

我正在玩W3Schools网站上的Ajax Live Search功能。它工作正常，但我希望结果div #livesearch在用户点击它时再次隐藏。我找到了一个代码片段来完成这个但是我无法成功地完成这两个代码。如果我添加代码，搜索结果可以在用户点击时隐藏，但用户必须先点击才能看到它们，这显然无法正常工作。

http://www.w3schools.com/php/php_ajax_livesearch.asp http://bytes.com/topic/javascript/answers/676788-hide-div-tag-if-outside-div-clicked

有人能指出我正确的方向吗？

由于

克里斯

Answer 1

查看javascript'onblur'事件。

您可以创建一个清除div的新函数：

blurFunction() {
document.getElementById("livesearch").innerHTML = ''
}

onblur事件：

<input type="text" size="30" onkeyup="showResult(this.value)" onblur="blurFunction()" />

编辑：其实我刚注意到showResult函数已经满足清除div，所以只需插入：

<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" />

Answer 2

如果我正确读取此选项，您希望当输入失去焦点时下拉列表消失，当鼠标移过焦点时重新出现，而不是单击？

我能够通过使用onblur事件隐藏框来实现这一点（我相信你发现的例子同样有效）。 onblur="hide(this)"隐藏下拉列表div。隐藏js功能是相同的：function hide(id) { document.getElementById("livesearch").style.display = "none"; }

要在鼠标悬停时重新显示，我在输入中添加了onmousemove个事件：<input type="text" size="30" onkeyup="showResult(this.value)" onblur="hide(this)" onmousemove="showResult(this.value)" />。

最重要的是我在document.getElementById("livesearch").style.display = "block";中添加了这一行xmlhttp.onreadystatechange=function()以重新出现div。

隐藏结果，W3Schools PHP示例AJAX Live Search

2 个答案: