Clear Results Div of Php Live MySQL Database Search (not input field) - php

Question

Sorry, I must be missing something really basic. I want to clear the results DIV after a search. I can either do it with a button, or, even better, when the input field is cleared. Currently if I use this reset button the input field is reset but the results DIV remains on the screen..
$(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..." />
<input id="btn" type="button" value="Calculate" name="btn"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result">Test</div>
</div>
</form>
When I query the database for results
Or
But when I click reset
The search box is reset but the search results remain
Thanks.

Answer 1

Check this example (check and adjust rest of your code accordingly):-
$('.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"/>
<input id="reset" type="reset" name="reset" value="Reset"/>
<div class="result"></div>
</div>
</form>
Try this code once:-
<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"/>
<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>