PHP - Recherche automatique avec AJAX

Introduction

Salut à toi ! Bienvenue dans notre aventure dans le monde de la programmation avec PHP et AJAX. Aujourd'hui, nous allons plonger profondément dans la création d'une fonctionnalité de recherche automatique en utilisant PHP et AJAX. Ce tutoriel est conçu pour les débutants qui n'ont aucune expérience préalable en programmation. Alors, c'est parti !

PHP - AJAX Auto Complete Search

Le Document XML

Avant de pouvoir créer notre fonctionnalité de recherche automatique, nous devons configurer un document XML qui servira de source de données. Un document XML est une collection de données stockées dans un format structuré qui peut être facilement lu par les humains et les machines. Dans ce cas, notre document XML contiendra une liste de villes du monde entier.

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>New York</city>
<city>Los Angeles</city>
<city>Chicago</city>
<city>Houston</city>
<city>Phoenix</city>
<city>Philadelphia</city>
<city>San Antonio</city>
<city>San Diego</city>
<city>Dallas</city>
<city>San Jose</city>
</cities>

Enregistre ce document XML sous le nom cities.xml dans le même répertoire que ton fichier PHP.

Code JavaScript

Maintenant que nous avons notre document XML prêt, il est temps d'écrire un peu de code JavaScript pour extraire les données du document XML et les afficher dans une liste déroulante lorsque l'utilisateur commence à taper dans la zone de recherche. Nous allons utiliser AJAX pour y parvenir sans rafraîchir la page.

Tout d'abord, créons un formulaire HTML avec une zone de recherche et une liste déroulante :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recherche automatique</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>

Ensuite, écrivons le code JavaScript dans un fichier séparé appelé autocomplete.js :

function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}

Dans ce code, nous définissons une fonction appelée showSuggestions qui prend une chaîne de caractères en entrée. Lorsque l'utilisateur tape quelque chose dans la zone de recherche, cette fonction est appelée avec la valeur de l'entrée. Si la longueur de l'entrée est nulle, nous vidons la liste de suggestions. Sinon, nous créons un objet XMLHttpRequest pour envoyer une requête AJAX à un fichier PHP appelé get_suggestions.php avec le paramètre de requête q défini à la valeur de l'entrée.

Code PHP

Maintenant, passons au côté PHP des choses. Nous allons créer un fichier appelé get_suggestions.php qui va gérer la requête AJAX et renvoyer les noms de ville correspondants sous forme de liste HTML :

<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();

foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}

echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . $city . '</li>';
}
echo '</ul>';
?>

Dans ce code PHP, nous chargeons d'abord le document XML en utilisant la fonction simplexml_load_file. Ensuite, nous parcourons chaque ville du document XML et vérifions si la chaîne de requête est trouvée dans le nom de la ville (en ignorant la sensibilité de la casse). Si une correspondance est trouvée, nous ajoutons la ville au tableau $matchingCities. Enfin, nous sortons une liste ordonnée (<ul>) contenant les noms des villes correspondantes sous forme d'items de liste (<li>).

Voilà ! Tu as maintenant une fonctionnalité de recherche automatique de base en utilisant PHP et AJAX. N'oublie pas de placer les trois fichiers (index.html, autocomplete.js, et get_suggestions.php) dans le même répertoire et d'ouvrir index.html dans un navigateur web pour voir la zone de recherche en action.

While you continue your journey in programming, you'll find that there are many ways to implement auto-complete features, such as using frameworks like React or Angular, or even using modern frontend libraries like Vue.js or Svelte. But for now, this simple example should give you a solid foundation to build upon.

Happy coding !

Credits: Image by storyset

Tutoriel précédent:

PHP - Analyseur XML AJAX

Tutoriel suivant:

PHP - Exemple de flux RSS AJAX