[JS][PHP][AJAX] Recherche instantanée ne renvoie rien.

Bonjour, dans le cadre de mon stage je dois réaliser une recherche qui s'actualise sans rechargement.
N'ayant jamais abordé le JS et l'AJAX auparavant, j'ai suivi un tutoriel mais je n'arrive pas à l'incorporer à mon code
Voici ou j'en suis et désolé d'avance pour les pavés...
Je précise que l'affichage de base fonctionne, c'est la recherche qui ne fonctionne pas

J'ai donc 3 fichiers. Un avec un script JS(search.js), un autre avec les requêtes SQL de recherche et l'affichage(fetch.php) et un dernier fichier qui récupère les données entrées dans la barre de recherche(produit_recherche.php).

Désolé par avance pour les pavés que je vais vous faire subir, je ne souhaitais pas trop tout copier coller sur un forum d'un coup mais au bout de deux jours de recherche je ne sais plus trop quoi faire..

Je précise que dans la console de mon navigateur, il se passe un truc à chaque fois que je tape une lettre dans la barre de recherche.

Merci aux personnes qui prendront le temps de m'aider !

search.js

$(document).ready(function(){
    $("#recherche").keyup(({
            var: recherche = $(this).val() }) => { });
        var data = 'motclef=' + recherche;
        if(recherche.length>2){
            $.ajax({
                type : "GET",
                url : "result.php",
                data : data,
                success: function(server_response){
                    $("#resultat").html(server_response).show();
                }
            });
        }
})

fetch.php

<?php
 include '_database.php'; 
$output = '';
if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($con, $_POST["query"]);
 $query = "SELECT * FROM produit 
            WHERE nomProduit LIKE '%".$search."%'
            OR libelleProduit LIKE '%".$search."%' 
            OR prixProduit LIKE '%".$search."%' 
 ";
}
else
{
 $query = "SELECT * 
            FROM produit ORDER BY nomProduit
 ";
}
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>ID</th>
     <th>Nom</th>
     <th>Commentaire</th>
     <th>Prix en €</th>
    </tr>
 ';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
   <tr>
    <td>'.$row["id_produit"].'</td>
    <td>'.$row["nomProduit"].'</td>
    <td>'.$row["libelleProduit"].'</td>
    <td>'.$row["prixProduit"].'</td>

   </tr>
  ';
 }
 echo $output;
}
else
{
 echo 'Aucun résultat ne correspond à votre recherche';
}

?>

<form method="POST" action='query'>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a href="index.php"><button class="btn btn-outline-success" type="button">Retour</button></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <form class="form-inline my-2 my-lg-0">
                <input type="text" name="search_text" id="search_text" placeholder="Ecrivez ce que vous recherchez ici" class="form-control" />           
            </form>
        </div>
    </nav>
</form>

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

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"GET",
   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>