Question

I am working on live search in html
I have worked well but I am getting a small problem,
Here is my index code:

<form id="quick-search" action="livesearch.php" method="GET" >
<p>
Search:
<input id="qsearch" type="text" name="qsearch" onkeyup="liveSearch()" />
<input type="submit" />
</p>
<div id="searchResults">

</div>
</form>

Here is my js code:

function liveSearch()
{
    var url = "livesearch.php";
    var s = document.getElementById('qsearch').value;
    http.open("POST", "livesearch.php?qsearch="+s, true);
    http.onreadystatechange = function() 
    {
        if(http.readyState == 4 && http.status == 200) 
        {
            document.getElementById('searchResults').innerHTML = 'Suggestions are as follow'+http.responseText; 
            //alert(http.responseText);
        } 
    }

    http.send();
}

I am getting the result correctly, But when I empty the complete input box, then I am getting the complete list box from the database, on empty the input box, I want to clear the list box

Answer 1

You should secure Your code in PHP and on user side. To do this check how many letters user did send: if(s.length < 2 ) return; to prevent AJAX request

function liveSearch()
    {
    var url = "livesearch.php";
    var s = document.getElementById('qsearch').value;
    if(s.length < 2) return; // here You escape if there isn't enough letters to search
    http.open("POST", "livesearch.php?qsearch="+s, true);
    http.onreadystatechange = function() 
    {
        if(http.readyState == 4 && http.status == 200) 
        {
            document.getElementById('searchResults').innerHTML = 'Suggestions are as follow'+http.responseText; 
            //alert(http.responseText);
        } 
    }

    http.send();
}

but remember to secure it on PHP as well:

if(count($_REQUEST['qsearch']) < 2) return false;