清除结果部分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>