Bonjour,

Je suis en train de créé le menu de mon site web, dans celui ci j'y ait intégrer une bar de recherche.

Je souhaiterais que ce système de recherche soit asynchrone.

J'ai 3 fichiers :

- nav.php avec mon menu est ma bar de recherche.

- recherche.js avec mon système d'asynchrone.

- systeme-recherche.php avec le système de recherche (il va parcourir ma bdd et y retourne les résultats.

nav.php

<div class="search">
	<div class="searchBar">
		<form method="POST" id="searchForm">
			<input type="search" id="searchInput" name="recherche" placeholder="Rechercher un Film, une Série..." />
			<button type="submit" name="rechercher"><i class="fas fa-search"></i></button>
		</form>
	</div>
	<div class="icon iconRegular iconSearch" id="iconSearch"></div>
</div>
<div class="searchBody">
	<h1>Votre recherche</h1>
	<div class="box littleSearchBox" id="littleSearchBox">
	<!-- Je veux le résultât de ma recherche ici... -->
	</div>
</div>
<script src="../../js/recherche/recherche.js"></script>

recherche.js

document.getElementById("searchForm").addEventListener("submit", function(e) {
	e.preventDefault();

	var searchInput = document.getElementById("searchInput").value;
	var searchInput = searchInput.replace(' ', '+');

	var xhr = new XMLHttpRequest();

	xhr.oonreadystatechange = function() {
		console.log(this);
		if (this.readyState == 4 && this.status == 200) {
			console.log(this.response);
		} else if (this.readyState == 4) {
			alert("Une erreur est survenue... (javascript)\nVeuillez réessayer.");
		}
	};

	console.log(searchInput);
	xhr.open("GET", "../../../php/recherche/systeme-recherche.php?query="+searchInput, true);
	xhr.send();

	return false;
})

systeme-recherche.php

<?php

$success = 0;
$msg = "Une erreur est survenue... (php)";

$redirect_log = 0;

if(file_exists("./main.php")) {
  require_once("./main.php");
} else if(file_exists("../main.php")) {
  require_once("../main.php");
} else if(file_exists("../../main.php")) {
  require_once("../../main.php");
}

if(isset($_GET['query']) AND !empty($_GET['query'])) {

   $success = 0;
   $q = strip_tags(trim(htmlspecialchars($_GET['query'])));

   $queryInfos = $dbco->query('SELECT * FROM article WHERE titre LIKE "%'.$q.'%" ORDER BY id DESC');

   if($queryInfos->rowCount() == 0) {
      $queryInfos = $dbco->query('SELECT * FROM article WHERE CONCAT(titre, date_de_sortie) LIKE "%'.$q.'%" ORDER BY id DESC');
      $success = 1;
      $msg = $q." trouver.";
   }
} else {
   $success = 0;
   $msg = "Aucune entré valide !";
}

$res = ["success" => $success, "msg" => $msg];
echo json_encode($res);

?>


<div class="container littleSearchContnaire">
<?php if(isset($queryInfos) AND $queryInfos->rowCount() > 0) {
   while($f = $queryInfos->fetch()) {?>
   <div class="box littleSearchBox">
      <div class="imgBx">
         <img src="<?= $f['affiche'] ?>" alt="Affiche de l'article : <?= $f['titre'] ?>">
      </div>
      <div class="title">
         <a href="../../article/<?= $f['url'] ?>">
            <h3 id="title" title="Aller voir l'article"><?= $f['titre'] ?></h3>
         </a>
      </div>
   </div>
<?php }} ?>
</div>

Au niveaux de la recherche, tous fonctionne.

le problème, c'est que je ne sais pas comment faire pour intégrer le fichier "systeme-recherche.php" dans le 'nav.php" pour afficher le résultât de la recherche et tous cela de manière asynchrone (sans que l'utilisateur ne recharge la page).

Merci pour votre aide,

Cordialement.

EDIT : xhr.oonreadystatechange == xhr.onreadystatechange

(quand je met onreadystatechange je peut pas envoyer le msg.)

-
Edité par </Normandie Dèv> 20 novembre 2021 à 11:25:49

Bonjour je n'ai pas bien lu tout le code mais s'il s'agit simplement du retour des résultats je vous conseille de récupérer un fetchAll() avec le pdo en fetch_assoc en php puis de faire un echo json_encode de ce fait vous récupérer un json que vous pourrez gérer en js pour l'affichage.

D'ailleurs purement en php je vous conseille de changer votre requête en requête préparer 

-
Edité par zvheer 20 novembre 2021 à 16:29:06

Si j'ai bien compris ce que vous m'avez conseillez pour mon "systeme-recherche.php" :

if(isset($_GET['query']) AND !empty($_GET['query'])) {

   $q = strip_tags(trim(htmlspecialchars($_GET['query'])));

   $table1Infos = $dbco->prepare('SELECT * FROM table1 WHERE titre LIKE ? ORDER BY id DESC');
   $table1Infos->execute(["%$q%"]);

   if($table1Infos->rowCount() == 0) {
      $table1Infos = $dbco->prepare('SELECT * FROM table1 WHERE CONCAT(titre, date_de_sortie) LIKE ? ORDER BY id DESC');
      $table1Infos->execute(["%$q%"]);
   }
}

$resultTable1 = $table1Infos->fetchAll();
// print_r($resultTable1 );
echo json_encode($resultTable1);

Par contre j'ai pas compris pour le fetch_assoc.

Pour le js :

document.getElementById("searchForm").addEventListener("submit", function(e) {
	e.preventDefault();

	var searchInput = document.getElementById("searchInput").value;
	var searchInput = searchInput.replace(' ', '+');

	var xhr = new XMLHttpRequest();

	xhr.onnreadystatechange = function() {
		console.log(this);
		if (this.readyState == 4 && this.status == 200) {
			console.log(this.response);
			// var reponse = JSON.parse(xhr.responseText);
    		// alert(reponse.id);
    		// console.log(reponse);
		} else if (this.readyState == 4) {
			alert("Une erreur est survenue... (javascript)\nVeuillez réessayer.");

		}
	};

	console.log(searchInput);
	xhr.open("GET", "../../../php/recherche/systeme-recherche.php?query="+searchInput, true);
	xhr.responseType = 'json';
	xhr.send();

	return false;
})

 Maintenant que j'ai le json dans la console, comment je fait pour transférer toutes les donnée en php ?

-
Edité par </Normandie Dèv> 20 novembre 2021 à 23:42:11

Le fetch assoc se fait de la sorte si vous n'avez pas de soucis de namespace... 

sur le fetchall vous faites

tata->fetchAll(PDO::FETCH_ASSOC)

car fetchall retourne un truc du style

0=>

     0=>tata

     id=> tata

      1=> tititi

       name =>tititi

fetch assoc va supprimer le 0 => tatata et le 1=>titi car on a deja l'info avec name et id

ensuite pour le json_encode il faut le recuperer en js pour le coup vu que vous utiliser ajax il faut récupérer le retour d'ajax qui sera sa ensuite pour bah vous avez un json en js sur lequel vous pourrez faire des boucles ect pour l'affichage dans votre html

Si j'ai bien compris pour le FETCH_ASSOC

$resultTable1 = $table1Infos->fetchAll(PDO::FETCH_ASSOC);

Puis-je avoir un exemple s'il vous plait ?

C'est bien sa pour le fetchAssoc, ensuite pour l'exemple voici j'ai fais quelque chose de vite fait que tu pourras tester mais il y a à modifier surtout au niveau de la requête js.

Donc j'ai deux pages une qui retournera les informations de ta base une qui les affiches .

J'ai créer un tableau qui va représenter le retour d'un fetchAll(PDO::FETCH_ASSOC) voici

<?php

    $data = array(
        0 => array(
            "title" => "Titre de l'article 1",
            "description" => "Description de l'article 1",
        ),
        1 => array(
            "title" => "Titre de l'article 2",
            "description" => "Description de l'article 2"
        )
    );

    if(isset($_POST["sendData"]) )
        echo json_encode($data);

La page html avec le js

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Affichage des informations</title>
</head>
<body>
    
    <style>

        body
        {
            margin: 0;
            padding: 0;
            padding-left: 10px;
            padding-top: 10px; 
            font-family: "Arial";
        }

        button
        {
            font-family: "Arial";
            padding: 5px;
            background-color: black;
            border-color: transparent;
            color: white;
        }

        button:hover
        {
            background-color: white;
            border-color: black;
            color: black;
        }

        #container ul
        {
            border-left: solid 2px lightgrey;
            list-style: none;
            padding-left: 5px;
            line-height: 30px;
        }

        #container ul li:nth-child(2)
        {
            font-size: small;
        }

    </style>

    <button name="getData">Récupérer les données</button>
    
    <div id="container">

    </div>

    <script>

        ddocument.qquerySelector("button[name=getData]").oonclick = function(){

            query = nnew XXMLHttpRequest();

            query.oonreadystatechange = ShowResponse;

            query.oopen("POST","returndata.php");

            query.ssetRequestHeader("Content-type","application/x-www-form-urlencoded");
            
            query.ssend("sendData=true");


            function ShowResponse()
            {
                data = JJSON.pparse(query.responseText);

                ffor(inf iin data)
                {
                    llet ul = ddocument.ccreateElement("ul");

                    llet li1 = ddocument.ccreateElement("li");

                    llet li2 = ddocument.ccreateElement("li");

                    llet title = ddocument.ccreateTextNode(data[inf].title);

                    llet description = ddocument.ccreateTextNode(data[inf].description);

                    lli1.aappend(title);

                    lli2.aappend(description);

                    uul.append(li1);

                    uul.append(li2);

                    ddocument.getElementById("container").append(ul);

                }
            }

        }

        

    </script>

</body>
</html>

Le gros de l'idée est là après ca reste à adapter.

Il faut vraiment qu'openclassroom corrige - j'ai fait des erreurs dans le js pour pouvoir envoyer le message il faudra les enlever - j'ai doubler la lettre du début des instructions

Voici ce que j'ai fait, par contre, j'ai ces erreur ci :

VM132:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ShowResponse ((index):92)
    at HTMLButtonElement.document.querySelector.onclick ((index):88)
ShowResponse @ (index):92
document.querySelector.onclick @ (index):88
VM133:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ShowResponse ((index):92)
ShowResponse @ (index):92
XMLHttpRequest.send (asynchrone)
document.querySelector.onclick @ (index):90

mes fichier (c'est plus simple comme ca) : https://codesandbox.io/s/systeme-de-recherche-php-js-g9yze?file=/nahttps://codesandbox.io/s/systeme-de-recherche-php-js-g9yze?file=/nav.php

par contre, sa ne récupère pas le json dans le console.log

-
Edité par </Normandie Dèv> 21 novembre 2021 à 12:27:52

comme indiqué ca vient du json.parse qui n'a pas reçu le bon type de données ,au lieu de faire le json parse fait directement un console.log de la reponse du xmlhttrequest voir si ca contient bien quelque chose.

J'ai rajouter un :

console.log(query.responseText);

j'ai toujours ces deux erreur :

VM2884:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ShowResponse (recherche.js:35)
    at HTMLButtonElement.document.querySelector.onclick (recherche.js:30)

et

VM2885:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.ShowResponse (recherche.js:35)
ShowResponse @ recherche.js:35
XMLHttpRequest.send (asynchrone)
document.querySelector.onclick @ recherche.js:32

et mon concole.log me renvoie deux fois ceci :

[{"title":"Titre de l'article 1","description":"Description de l'article 1"},{"title":"Titre de l'article 2","description":"Description de l'article 2"}]

(j'ai vérifier, il n'y a pas 2 console.log).

en image :

c'est ce que j'avais aussi, pour cela que j'ai dis que c'est a adapter essayez de bien lire la doc de xmlhttprequest je ne l'ai fait que rapidement pour l'exemple 

Bonjour,

J'ai enfin réussie !

Je n'ai plus d'erreur.

Il falait juste vérifier si "query.readyState === 4 && query.status === 200".

Voici mon code :

document.QquerySelector("button[name=getData]").Oonclick = function(){
	query = new XXMLHttpRequest();
	query.Oonreadystatechange = Ffunction() {
	  if(query.RreadyState === 4 && query.Sstatus === 200) {
		Cconst data = JJSON.parse(query.RresponseText);
		console.log(query.RresponseText);
			Ffor(inf in data) {
				Llet ul = document.createElement("ul");
				Llet li1 = document.createElement("li");
				Llet li2 = document.createElement("li");
				Llet title = document.createTextNode(data[inf].title);
				Llet description = document.createTextNode(data[inf].description);
				Lli1.append(title);
				Lli2.append(description);
				Uul.append(li1);
				Uul.append(li2);
				Ddocument.getElementById("container").append(ul);
			}
		}
	};
	query.open("POST","../../php/recherche/result-recherche.php", true);
	query.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	query.send("sendData=true");
}

Merci beaucoup, il ne me reste plus qu'à faire passer mes résultât de ma bdd dans un array.

Comment ca dans un array vous voulez dire cote php ?

Si c'est le cas le tableau d'exemple que j'ai copie exactement la maniere dont fetchAll avec fetchassoc va renvoyer le resultat de la base de données.

Donc vous n'avez qu'a stocker le fetchall dans une variable et faire le echo json_encode dessus

ou directement faire echo json_encode $resultat->fetchAll avec le fetch assoc ca le fais aussi

-
Edité par zvheer 28 novembre 2021 à 14:32:45

Merci beaucoup, grâce à vous, j'ai réussie.

Cependant, je souhaiterais pour plus d'ergonomie et de facilité pour mes utilisateur que à chaque fois qu'il entre du texte, le formulaire d'envoie automatiquement.

Ex:

Utilisateur tape "A" => système renvoie les recherche de "A"

Utilisateur tape "B" => système renvoie les recherche de "B"

...

-
Edité par </Normandie Dèv> 28 novembre 2021 à 18:18:44

dans ce cas il va te valoir utiliser l'event on input en javascript qui va recuperer la saisie l'envoyer en post a ta page php qui elle va faire ses manips et te rencoyer un json pareil ce qu'on a utilisé pour le premier soucis.

Merci beaucoup, voici ce que j'ai fait : 

J'ai ajouter 

oninput="sendInputSearch();"

a mon input, puis à l'appel de ma fonction, elle déclenche deux autres fonctions

function sendInputSearch(){
	queryTable1();
	queryTable2();
}

et pour finir

document.getElementById("searchForm").addEventListener("submit", function(e) {
	e.preventDefault();
	queryTable1();
})

function queryTable1(e){
// mon code
}

la même chose pour ma seconde table.

Merci beaucoup.

Si tout est ok n'oublies pas de mettre le sujet comme résolu ravis d'avoir ou t'aider