Question

I have a number of search/text boxes that, using AJAX, search database tables and place results/search suggestions in a div similar to google search. Right now other than reloading the page there is no way to empty these divs. I would like to make it so that if you backspace to make the textbox blank as in google search, the div empties out. Right now when you backspace all the way it treats it as searching on “” and returns all the results. Or alternatively let you click outside the box to empty it. Otherwise I am ending up with filled divs on the page which clutters it up. I am thinking I either need to do change query so that if the string is empty it returns nothing or something with javascript if you click outside the box the box goes empty. Thanks for any suggestion:

Here is abbreviated code:

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

Just check for an empty string and process accordingly:

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