Forum : [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>

4 réponses

Mickael Christine,

il y a 5 ans

Salut éssaie ceci à la place de ton code dans search.js et dit nous si tu obtiens bien un résultat

$(document).ready(function () { $("#recherche").on("change paste keyup", function (e) { e.preventDefault(); var data = "motclef=" + $(this).val(); // ICI des espaces blanc egale length > 2, // y'a surement un truc à voir =) if ($(this).val().length > 2) { $.ajax({ type: "GET", url: "result.php", data: data, success: function (server_response) { console.log("REPONSE DE MA RECHERCHE", server_response) <==== ICI OBTIENS TU QUELQUE CHOSE ? $("#resultat").html(server_response).show(); }, }); } }); });

Arnaud Vareille,

il y a 5 ans

Salut Mickael, et merci pour ta réponse.
Malheureusement je n'obtiens rien, même pas une erreur.
Il y'a quelque chose qui me dérange, c'est l'url dans l'AJAX.
Dans le tuto c'est bien result.php alors qu'il n'y'a pas de fichier ayant ce nom là.

if ($(this).val().length > 2) { $.ajax({ type: "GET", url: "result.php", <<<< data: data, success: function (server_response) { console.log("REPONSE DE MA RECHERCHE", server_response) // <==== ICI OBTIENS TU QUELQUE CHOSE ? $("#resultat").html(server_response).show(); }, }); }

EDIT : j'ai trouvé le soucis... il manquait juste un <div id="result"></div> dans mon code.
Merci pour ton aide

Arnaud Vareille,

il y a 5 ans

Je me permets de renvoyer un message pusique j'ai un deuxième soucis !
Mon tableau s'affiche en double.
Le premier est bien placé et répond bien aux requêtes envoyés en s'actualisant automatiquement.
Le deuxième ne sert à rien et apparait au fond de ma page sans raison (enfin y'a une toujours une raison mais je la connais pas là)

<?php include '_database.php'; $output = ''; if(isset($_GET["query"])) { $search = mysqli_real_escape_string($con, $_GET["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 .= ' <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'; } ?>

Lartak,

il y a 5 ans

Bonjour.

Mon tableau s'affiche en double.

Regardes bien le code HTML que tu génères depuis ton code PHP, tu à la balise ouvrante pour le tag table, mais pas la balise fermante pour celui-ci.
Donc problème de sémantique HTML.