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
Ma page d'affichage de mon tableau de produits:

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';
}

?>

La barre de recherche

produit_recherche.php

<form method="POST">
    <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>

et le JS:

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();
                }
            });
        }
})

Je me doute que ça donne pas trop envie d'analyser mais ça fait deux jours que je suis coincé (ça marche bien avant que je ne l'incorpore à mon code), merci à ceux qui se pencheront là dessus !

EDIT : Dans la console, je vois qu'à chaque fois que je tape une lettre il se passe un truc

type : "GET",
if(isset($_POST["query"]))

url:"fetch.php",
url : "result.php",

ce qui va poser des problèmes.

dans la console, il faut ouvrir l'url pour voir ce que le php retourne.

Bonjour or 1, merci pour ta réponse.
J'ai essayé de tout mettre en GET ou alors en POST, mais le même soucis persiste : l'affichage des produits n'est pas filtré.
Lorsque je vais dans la console et que je tape quelques lettres dans la barre de recherche, l'url renvoie pourtant ce que je souhaite :

http://localhost/semaine3.2/fetch.php?query=p
http://localhost/semaine3.2/fetch.php?query=po
http://localhost/semaine3.2/fetch.php?query=pom

Le problème est à l'affichage mais je n'arrive pas à le cerner ...

pour debuguer, il faut aussi afficher les messages d'erreur javascript.
$('#result').html(data);
s'il n'existe pas de balise html avec un id="result", ce code ne va pas fonctionner.