在AJAX请求后重置DOM

Question

I am trying to implement a search functionality powered by an AJAX requests on this site here

http://polypodhub.com/ISL/

You can notice that when you start typing in the input, the AJAX call starts fetching the file names. So for instance if you type "S" it will fetch all the file names that have "S" in them. Now what I'm having trouble with is what happens after you delete your search query. What I would like to happen is for the table under the London category to reappear, but the AJAX request is deleting it.

Any idea as to what I should do to reset things when the input field is empty?

This is my AJAX request

<?php
$section='downloads';
$table="downloads";
$schoolSelectorTable="downloadsinschool";
$schoolSelector="downloads";
$folder="../../downloads/";


    $db_host = "localhost";
    $db_user = "root";
    $db_pass = "";
    $db_name = "isl";


mysql_connect($db_host, $db_user, $db_pass, $db_name);
mysql_select_db("isl") or die(mysql_error());

$partialStates = $_POST['partialState'];
$states = mysql_query("SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads` WHERE `school` = 2 AND `title` LIKE '%$partialStates%'" );


if($_POST['partialState']){

while($state = mysql_fetch_array($states)){
    echo "<tr><td class='tlong'>".$state['title']."</td></tr>";
}
}

?>

This is the form which contains the search field:

<form style="background-color:;width:;" name="searchField">

<input type="text" name="search" class="downloadSearchBar" onkeyup = "getStatesLondon(this.value), getStatesSizeLondon(this.value), getStatesSurrey(this.value),getStatesSizeSurrey(this.value)" />
</form>

This is the table which is being fed data by the database and then filtered by the AJAX call:

    <?php
        //$query = "SELECT * FROM `downloads`, `downloadsinschool` WHERE `school` = '2'";
        $query = "SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads`
        WHERE `school` = 2 ORDER BY DAT DESC";
        $result=$connection->query($query);

        echo '<table class="resultsLondon" style="float:left;margin-top:;margin-right:30px;">';
              // echo '<div class="resultsLondon"></div>';
            // echo'<tr><td class="resultsLondon" class="tlong"><a style="padding-left:5px;"></a></td>
            // <td class="resultsSizeLondon" style="width:px;overflow:hidden;"><a style="width:10px;overflow:hidden;" href="#"></a></td></tr>';
        while($row = $result->fetch_array()) {
            echo '<tr><td id="" class="tlong"><a style="padding-left:5px;" href="downloads/'.$row['filename'].'">'.$row['title'].'</a></td>
            <td style="width:px;overflow:hidden;"><a style="width:10px;overflow:hidden;" href="#">'.$row['filesize'].'</a></td></tr>';
          }
        echo '</table>';

    ?>

And this is the AJAX method:

    function getStatesLondon(value){
    $.post("update/getStatesLondon.php", {partialState:value}, function(data){
      $(".resultsLondon").html(data);
    });
  }

Answer 1

You return 0 if the partialState is empty. You don't want that, just return the full set of results if the search string is empty:

$partialStates = $_POST['partialState'];
$query = "SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads` WHERE `school` = 2";
if ($partialStates) {
    $query += "AND `title` LIKE '%$partialStates%'"
}

$states = mysql_query($query);
while($state = mysql_fetch_array($states)){
    echo "<tr><td class='tlong'>".$state['title']."</td></tr>";
}