清除結果部分Php Live MySQL數據庫搜索（未輸入字段）

Question

對不起，我必須缺少一些非常基本的東西。我想在搜索後清除結果DIV。我可以用按鈕來做，或者，甚至更好，當輸入字段被清除時。目前，如果我用這個復位按鈕輸入字段復位，但結果DIV保留在屏幕上..

 $(document).ready(function(){ 
 
     $('.search-box input[type="text"]').on("keyup input", function(){ 
 
      /* Get input value on change */ 
 
      var term = $(this).val(); 
 
      var resultDropdown = $(this).siblings(".result"); 
 
      if(term.length){ 
 
       $.get("incl_php/backend-search.php", {query: term}).done(function(data){ 
 
        // Display the returned data in browser 
 
        resultDropdown.html(data); 
 
       }); 
 
      } else{ 
 
       resultDropdown.empty(); 
 
      } 
 
     }); 
 
     
 
     // Set search input value on click of result item 
 
     $(document).on("click", ".result p", function(){ 
 
      $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
 
      $(this).parent(".result").empty(); 
 
     }); 
 
     }); 
 
     
 
     $("#reset").on("click", function() { 
 
      $(".result").empty(); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
     <div class="search-box"> 
 
      <input type="text" autocomplete="off" placeholder="Search..." /> 
 
    \t \t <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp; 
 
    \t \t <input id="reset" type="reset" name="reset" value="Reset"/> \t \t 
 
      <div class="result">Test</div>  
 
    \t </div> \t 
 
</form>

當我查詢結果

或者

數據庫

但是，當我點擊重置

搜索框被重置，但搜索結果仍然是

謝謝。

Answer 1

檢查這個例子（檢查並相應地調整你的代碼的其餘部分）： -

$('.search-box input[type="text"]').on("keyup input", function(){ 
 
    var term = $(this).val(); 
 
    var resultDropdown = $(this).siblings(".result"); 
 
    if(term.length){ 
 
      resultDropdown.html(term); 
 
    } else{ 
 
     resultDropdown.html(''); 
 
    } 
 
}); 
 

 
// Set search input value on click of result item 
 
$(document).on("click", ".result p", function(){ 
 
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
 
    $(this).parent(".result").html(''); 
 
}); 
 

 
$("#reset").on("click", function() { 
 
    $(".result").html(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="search-box"> 
 
     <input type="text" autocomplete="off" placeholder="Search..." /> 
 
     <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp; 
 
     <input id="reset" type="reset" name="reset" value="Reset"/>  
 
     <div class="result"></div>  
 
    </div> 
 
</form>

試試這個代碼一次： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<form> 
     <div class="search-box"> 
      <input type="text" autocomplete="off" placeholder="Search..." /> 
      <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp; 
      <input id="reset" type="reset" name="reset" value="Reset"/>  
      <div class="result">Test</div>  
     </div> 
</form> 
<script type = "text/javascript"> 
$(document).ready(function(){ 
    $('.search-box input[type="text"]').on("keyup input", function(){ 
     /* Get input value on change */ 
     var term = $(this).val(); 
     var resultDropdown = $(this).siblings(".result"); 
     if(term.length){ 
      $.get("incl_php/backend-search.php", {query: term}).done(function(data){ 
       // Display the returned data in browser 
       resultDropdown.html(data); 
      }); 
     } else{ 
      resultDropdown.html(''); 
     } 
    }); 

    // Set search input value on click of result item 
    $(document).on("click", ".result p", function(){ 
     $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
     $(this).parent(".result").html(''); 
    }); 
}); 

$("#reset").on("click", function() { 
    $(".result").html(''); 
}); 
</script>