Searchbox (AJAX) won't load requested data - php

Question

so I have a problem I can't find the error.
By default the page should load all data and when I hit search, only the requested ones (no refreshing page).
(Even better would be if I could also change the outcome/request by changing the url without having to type in in the input field:
entering url: .../searchpage.php?search=banana --> results for banana
entering url: .../searchpage.php?search=apple --> results for apple
but small steps first.)
Do you have maybe see where my problem is? Or so you know some good pages where I can find solutions/information for my problem? \
A big thankyou in advance!
index.php:
<script src="assets/js/jquery.min.js"></script> //v3.4.1
<section class="wrapper">
<div class="formpost">
<div class="searchpannel">
<input type="text" class="searchBox" name="searchBox" id="searchBox" placeholder="Search..">
<button type="submit" id="searchBtn">SEARCH</button>
</div>
<div id="SearchResult"> <?php include 'startdata.php'?> </div>
</div>
</section>
<script>
$(document).ready(function(){
$('#searchdata').click(function(e){
e.preventDefault();
var searchtext = $('input[name=searchBox]').val();
$.ajax({
type: "POST",
url: "fetchdata.php",
data: {
"search_post_btn": 1,
"searchBox": searchBox,
},
dataType: "text",
success: function (response) {
$("#SearchResult").html(response);
}
})
})
})
</script>
fetchdata.php:
<?php
$conn = mysqli_connect("localhost", "root", "");
$db = mysqli_select_db($conn, 'ajax');
if(isset($_POST['search_post_btn'])) {
$search = $_POST['searchBox'];
$query = "SELECT * FROM ajaxtest WHERE name LIKE '%$search%' ";
$query_run = mysqli_query($conn,$query);
if(mysqli_num_rows($query_run) > 0){
WHILE ($row = mysqli_fetch_assoc($query_run)) {
echo "<h2>Hallo, my name is ";
echo $row['name'];
echo "<strong>";
echo $row['famname'];
echo "</strong></h2><p> On the list I'm place ";
echo $row['id'];
echo "</p>";
}
}
}
?>

Answer 1

Hi you have to do some modification in your code
$.ajax({
type: "POST",
url: "fetchdata.php",
data: {
"search_post_btn": 1,
"searchBox": searchBox,
},
dataType: "json",
success: function (response) {
$("#SearchResult").html(response);
}
})
----- PHP CODE ----
<?php
$conn = mysqli_connect("localhost", "root", "");
$db = mysqli_select_db($conn, 'ajax');
if(isset($_POST['search_post_btn'])) {
$search = $_POST['searchBox'];
$query = "SELECT * FROM ajaxtest WHERE name LIKE '%$search%' ";
$query_run = mysqli_query($conn,$query);
if(mysqli_num_rows($query_run) > 0){
$design = "";
WHILE ($row = mysqli_fetch_assoc($query_run)) {
$design .= "<h2>Hallo, my name is ".$row['name']."<strong>".$row['famname']."</strong></h2><p> On the list I'm place ".$row['id']."</p>";
}
print_r(json_encode($design));
die;
}
}
?>