MySQL Search Box with AJAX

Question

I got a small problem. I want to look up the name by entering the website. Now, all records are displayed. What I want is that he shows it after something has been entered in the input. I don't want him to show everything immediately.

Here some code to know how it looks like.

FETCH.PHP

Get everything from database

if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($connect, $_POST["query"]);
 $query = "


   SELECT * FROM tbl_customer 
      WHERE website LIKE '%".$search."%'
      OR naam LIKE '%".$search."%' 
     ";
    }
    else
    {
     $query = "
  SELECT * FROM test ORDER BY id
     ";
    }
    $result = mysqli_query($connect, $query);
    if(mysqli_num_rows($result) > 0)
    {
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>Website</th>
     <th>Naam</th>
    </tr>
 ';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
   <tr>
    <td>'.$row["website"].'</td>
    <td>'.$row["naam"].'</td>
   </tr>
  ';
 }
 echo $output;
}

INDEX.PHP

<div class="container">
   <br />
   <h2 align="center">Ajax Live Data Search using Jquery PHP MySql</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Zoek door website" class="form-control" />
    </div>
   </div>
   <br />
   <div id="result"></div>

<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>

Answer 1

why do u call function load_data(); on load. this might be the issue

also remove it from else condition