AJAX 请求后重置 DOM

Question

我正在尝试在此站点上实现由 AJAX 请求提供支持的搜索功能

http://polypodhub.com/ISL/

您会注意到，当您开始输入输入时，AJAX 调用开始获取文件名。因此，例如，如果您键入“S”，它将获取所有包含“S”的文件名。现在我遇到的问题是删除搜索查询后会发生什么。我希望伦敦类别下的表格重新出现，但 AJAX 请求正在删除它。

知道当输入字段为空时我应该如何重置内容吗？

这是我的 AJAX 请求

<?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>";
}
}

?>

这是包含搜索字段的表单：

<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>

这是由数据库提供数据然后由 AJAX 调用过滤的表：

    <?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>';

    ?>

这是 AJAX 方法：

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

Answer 1

如果 partialState 为空，则返回 0。你不想这样，如果搜索字符串为空，只需返回完整的结果集：

$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>";
}