Forum : barre de recherche en ajax/php

Bonjour, j'essaie de faire une barre de recherche qui affiche les pseudos demandés dans mais je n'ai aucune erreur et rien ne se passe ...
Est ce que quelqu'un pourrait m'aider svp : )

ici c'est la page des contacts
"```

<body>
<div class="container">
<div class="row">
<div class="col-sm-0 col-md-2 col-lg-3"></div>
<div class="col-sm-12 col-md-8 col-lg-6">
<h1 style="text-align: center">Barre de recherche</h1>

                <div class="form-group">
                    <input class="form-control" type="text" id="search-user" value="" placeholder="Rechercher un ou plusieurs utilisateurs"/>
                </div>
                <div style="margin-top: 20px">
                    <div id="result-search"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
      $(document).ready(function(){
        $('#search-user').keyup(function(){
          $('#result-search').html('');

          var utilisateur = $(this).val();

          if(utilisateur != ""){
            $.ajax({
              type: 'GET',
              url: 'recherche_utilisateur.php',
              data: 'user=' + encodeURIComponent(utilisateur),
              success: function(data){
                if(data != ""){
                  $('#result-search').append(data);
                }else{
                  document.getElementById('result-search').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'>Aucun utilisateur</div>"
                }
              }
            });
          }
        });
      });
    </script>
</body>



 ici c'est la page pour rechercher les personnes
 "```
 <?php
error_reporting(E_ALL);
ini_set("display_errors", 1);

  session_start();
  require_once('config.php');

  if(isset($_GET['user'])){
    $user = (String) trim($_GET['user']);

    $req = $bdd->prepare("SELECT *
          FROM utilisateurs
          WHERE pseudo LIKE ?
          LIMIT 10");
      $req->execute(array($user));
        $r = $req->fetch();

    $req = $req->fetchALL();

    foreach($req as $r){
      ?>
        <div style="margin-top: 20px 0; border-bottom: 2px solid #ccc">
          <?= $r['pseudo']?>
        </div>
      <?php
    }
  }
?>

 ```"

Merci d'avoir regarder mon code

Orivoir21

Bonjour, au niveau de la requête réseaux tu peux ajouter une propriété error qui sera une fonction exécuter en cas d'erreur cela te permet de la detécter:
Tu peux aussi faire un console.log du contenu que ta renvoyé le serveur pendant les phases de debug.

 $.ajax({
     type: 'GET',
     url: 'recherche_utilisateur.php',
     data: 'user=' + encodeURIComponent(utilisateur),
     success: function(data){
        console.log(data);

         if(data != ""){
             $('#result-search').append(data);
         }else{
             document.getElementById('result-search').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'>Aucun utilisateur</div>"
         }
     },
     error: function(error) {
        console.erro(`cant search user with: ${error.code} => ${error.message}`);
     }
 });

Côté serveur lorsque user n'existe pas dans la superglobal $_GET aucun contenu n'est renvoyé.
Ce qui peut provoqué des erreurs muettes

  if(isset($_GET['user'])){
    // do something ...
    // ...
    // ...
  }

  // user n'existe pas dans l'URL
  else {
    echo "user missing";
  }

Dans le code ci-dessus si user est manquant dans l'URL on renvoie un simple text d'erreur.
Puis grâce au console.log de debuggage dans le code Javascript ce scénaria d'erreur sera visible dans la console.

Avec AJAX jQuery c'est la propriété method qui sert à déclaré la method HTTP utilisé.

 $.ajax({
     // type: 'GET',
     method: "GET",
     url: 'recherche_utilisateur.php',
     data: 'user=' + encodeURIComponent(utilisateur),
     success: function(data){
        console.log(data);

         if(data != ""){
             $('#result-search').append(data);
         }else{
             document.getElementById('result-search').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'>Aucun utilisateur</div>"
         }
     },
     error: function(error) {
        console.erro(`cant search user with: ${error.code} => ${error.message}`);
     }
 });

Pour visualiser l'état d'une requête AJAX au niveau de ton navigateur, tu peux faire:

cick droit -> inspecter élément onglet network/réseaux colonnes xhr

Ce qui doit te donner un onglet comme sur cette capture d'écran
Quelque informations peuvent changer si tu utilises un navigateur où une version différente de celui de la capture d'écrant (Microsoft Edge Version 101.0.1210.39 (Official build))
Mais globalement les mêmes informations doivent être présentes.
Le status code du server, la cible de la requête (ce qui te permet de visualiser si le paramètre user est envoyé correctement dans l'URL) et puis les en-têtes de requête/réponse.

Carouge10

bonjour.
tu as mis un fetch dans ton code php du coup tu supprimes le 1er résultat. enlève cette ligne

il faut aussi ajouter des % autour de ta recherche pour pouvoir rechercher des bouts de pseudos

barre de recherche en ajax/php

2 réponses