Question

我有许多搜索/文本框，使用AJAX搜索数据库表并将结果/搜索建议放在类似于谷歌搜索的div中。现在除了重新加载页面之外，没有办法清空这些div。我想这样做，如果您退格以使文本框像谷歌搜索中一样空白，则div会清空。现在，当你一直退格时，它将其视为在“”上搜索并返回所有结果。或者，您也可以在框外单击以清空它。否则，我最终会在页面上填充div，这会使它变得混乱。我想我要么需要做更改查询，这样如果字符串为空，则返回任何内容或javascript的内容，如果您在框外单击该框为空。感谢您的任何建议：

这是缩写代码：

的Javascript

function getHints(str) {
...
document.getElementById("results").innerHTML=xmlhttp.responseText;//places output in results div
...
xmlhttp.open("GET","search.php?searchterm="+str,true);
xmlhttp.send();
}

HTML

<input type="text" id="search" onkeyup="getHints(this.value)">Search<div id="results"></div>

PHP

$str = $_REQUEST['str'];
$sql = "SELECT * FROM table WHERE name LIKE '%$str%'";
search database and echo out results.

Answer 1

使用jQuery，在做这样的事情，AJAX，操纵DOM等时会对你有很大的帮助。

function getHints(str) {
    ...
    if (str === "")
    {
        document.getElementById("results").innerHTML = "";
    }
    else
    {
        document.getElementById("results").innerHTML=xmlhttp.responseText;
        ...
        xmlhttp.open("GET","search.php?searchterm="+str,true);
        xmlhttp.send();
    }
}

Answer 2

只需检查一个空字符串并进行相应的处理：

function getHints(str) {
    if (str == "") {
        document.getElementsById("results").innerHTML = "";
    }
    else {
    ...
    }
}

javascript使div通过单击外部空白

2 个答案: