Forum : Autocomplete PHP, MySql, Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour, j'ai un souci avec mon script, en fait je voulais créer une méthode d'autocomplete pour appeler les données de la base des données sans utiliser la balise select dans un champs sous forme d'une liste déroulante. par chance; je suis tomber sur une vidéo youtub qui explique correctement à travers un tuto comment arriver à obtenir le résultat, sauf que pour mon cas, le scritp me renvoit une erreur que je n'arrive pas à comprendre. Besoin d'aide s'il vous plaît.
voici les scripts en question


1. index.php

<input type="text" name="country_name" id="campo" class="form-control form-control-lg" placeholder="name article" autocomplete="off">
  <ul id="lista"></ul>

  2. script.js

  document.getElementById('campo').addEventListener('keyup', getCodigos)
     function getCodigos(){
     let input = document.getElementById("campo").value

     let lista = document.getElementById("lista")

     let url = "inc/search.php";
     let formData  = new FormData()
     formData.append("campo", input)

     fetch(url, {
         method: "POST",
         body: formData,
         mode: "cors"
     }).then(response => response.json())
     .then(data => {
         lista.style.display = "block"
         lista.innerHTML = data
     })
     .catch( err => console.log(err))

     3. search.php

    <?php
     require('connect.php');

     $campo = $_POST['input'];

     $sql = "SELECT * FROM tb_article_art WHERE nom_art LIKE ? ORDER BY nom_art ASC";

     $query = $connect->prepare($sql);

     $query->execute(["%".$campo."%"]);

     $html = "";

     while($row = $query->fetch(PDO::FETCH_ASSOC))
     {
         $html .= "<li>".$row['nom_art']."</li>";
     }
     echo json_encode($html, JSON_UNESCAPED_UNICODE);
?>
 }

l'erreur que me renvoit le script après avoir inspecté la page est la suivante:

 SyntaxError: Unexpected token '<', "<br />
<fo"... is not valid JSON

Qui me raméne à la ligne suivante

  .catch( err => console.log(err))

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

Azorgh

Bonjour à toi,

Le code d'erreur exprime bien ce qui se passe mal.

Il faut bien comprendre que le format JSON est un format de structuration de donnée. Comme un tableau ou un objet en PHP, le JSON contient des données structurées.
De ton côté, tu créer une variable $html que tu alimentes de <li>, et ensuite tu json_encode une chaîne de caractères, que tu décodes côté Javascript.

Quand tu décodes, ton javascript est complètement paumé, il ne retrouve pas de structuration JSON.

Je vois 2 solutions :

Retourner un tableau de données JSON et boucler dessus en Javascript pour ajouter des <li> dans ta liste
Retourner du HTML pur et dur côté PHP (donc pas de JSON encode, juste le $html et côté Javascript ne pas response.json() puisque tu auras du HTML directement.

La première solution est la plus propre en terme de structuration, voici un petit exemple de comment ça pourrait marcher (à adapter) :

Code PHP

     require('connect.php');

     $campo = $_POST['input'];

     $sql = "SELECT * FROM tb_article_art WHERE nom_art LIKE ? ORDER BY nom_art ASC";
     $query = $connect->prepare($sql);
     $query->execute(["%".$campo."%"]);

     $articles = [];

     while($row = $query->fetch(PDO::FETCH_ASSOC))
     {
        //On ajoute au tableau "articles" le nom des articles
         $articles[] = $row['nom_article'];
     }

     //On returne le tableau $articles transformé en JSON
     echo json_encode($articles, JSON_UNESCAPED_UNICODE);

 fetch(url, {
         method: "POST",
         body: formData,
         mode: "cors"
     })
     .then(response => response.json())
     .then(response => {
            lista.style.display = "block"

            //Pour chaque article retourné, on créé un "li" avec le nomArticle à l'interieur
            response.forEach((nomArticle) => {
                let li = document.createElement("li");
                li.appendChild(document.createTextNode(nomArticle));
                lista.appendChild(li);
            });
      })
     .catch( err => console.log(err))

JEAN KIBA

Auteur

Merci beaucoup pour votre intervention, je m'y mets toute de suite pour voir le résultat

JEAN KIBA

Auteur

document.getElementById('campo').addEventListener('keyup', getCodigos)
     function getCodigos(){
     let input = document.getElementById("campo").value

     let lista = document.getElementById("lista")

     let url = "inc/search.php";
     let formData  = new FormData()
     formData.append("campo", input)

     fetch(url, {
         method: "POST",
         body: formData,
         mode: "cors"
     }).then(response => response.json())
     .then(response => {
         lista.style.display = "block"
         response.forEach((nom_art) => {
             let li = document.createElement("li");
             li.appendChild(document.createTextNode(nom_art));
             lista.appendChild(li);
         });
     })
     .catch( err => console.log(err))

 }

 Je refais votre idée, mais le résultat est toujours le même