In this French tutorial, the instructor demonstrates how to build a real‑time autocomplete feature using AJAX with a PHP CGI backend. After reviewing previous lessons on creating an AJAX instance and handling text/XML responses, the video shifts to generating server responses via a PHP script. The client side consists of an `autocomplete.html` page that captures user input in a text field and sends it to `contenu.php` using an `XMLHttpRequest` triggered on the `onkeyup` event. The request is sent via POST with the `Content-Type: application/x-www-form-urlencoded` header, encoding the typed word as the `mot` parameter. On the server, `contenu.php` includes a PDO connection (`connexion.php`), prepares a SELECT query on a `Glossaire` table, uses a `LIKE` pattern with a leading `%` and `trim` to match entries that start with the user’s input, and fetches results as an associative array. The results are wrapped in `<div>` elements and returned as plain text. The client script receives the response, injects the HTML into a suggestion container (`sug`), and toggles its visibility with CSS (`visibility: hidden/visible`) based on whether there are matches and whether the input field is empty. Finally, a click handler is added to each suggestion div: clicking a suggestion copies its text into the input field using `event.target.textContent`. The tutorial walks through each step, testing in the browser, debugging, and refining the UI, concluding that AJAX can retrieve dynamically generated CGI responses to power an autocomplete system.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon consacrée à la technologie AJAX. Dans les vidéos précédentes, nous avons vu comment créer une instance AJAX et comment passer les requêtes au serveur dans le mode asynchrone. Nous avons aussi pu récupérer la réponse de celui-ci en format texte et en format XML. Aujourd'hui, nous allons voir comment récupérer la réponse du serveur générée en CGI. Dans notre cas, on va utiliser le langage PHP. En fait, le principe consiste toujours à récupérer une réponse texte, mais celle-ci sera générée à l'aide d'un script PHP qui tournera sur le serveur. Et comme exemple, nous allons essayer de développer un système de saisie automatique ou autocomplétion à partir d'enregistrements chargés depuis une base de données. Dans cet exemple, on aura besoin des pages suivantes: une page qui s'appelle autocomplete.html et qui contiendra le code AJAX qui permettra d'afficher le résultat sur la page même. Une page qui s'appelle contenu.php qui va interroger le serveur afin d'extraire les informations depuis la base de données, et une page connexion.php qui contient la chaîne de connexion en utilisant l'objet PDO. Comme vous le voyez, le code AJAX est le même que celui utilisé dans la vidéo consacrée à l'extraction de réponses texte depuis le serveur. Et on dispose d'une zone de texte qui permettra à l'utilisateur de saisir la chaîne de caractères souhaitée, et une div identifiée par sug pour dire suggestion qui contiendra les propositions générées par le système d'autocomplétion. Dans un premier temps, j'ai prévu un simple événement clic sur la zone de texte afin de faire le test. Exécutons sur navigateur pour voir le résultat. Quand je clique sur la zone de texte, j'ai la réponse qui provient du serveur sous format texte. Alors jusqu'ici, rien de nouveau. Figurez-vous que le système d'autocomplétion identifie la chaîne de caractères éditée en temps réel dans la zone de texte afin de chercher les correspondances dans la base de données. Alors on va changer l'événement Au lieu de onclick, on mettra onkeyup. Exécutons. Quand j'appuie sur une touche du clavier, l'événement est détecté et la réponse provient du serveur. Bien entendu, il y a des choses qu'il faut changer dans cette page afin que le traitement corresponde à ce que l'on souhaite. Premièrement, on va remplacer la source contenu.txt par contenu.php qui est vide dans un premier temps. Et n'oubliez pas que quand l'utilisateur saisit la zone de texte, alors il envoie automatiquement le contenu de celle-ci au serveur. Alors on imagine qu'on va envoyer des paramètres dans la requête passée au serveur. Dans ce cas, on va pas utiliser la méthode GET mais la méthode POST. Ensuite, on va spécifier les paramètres à envoyer dans la méthode send. On mettra la chaîne de caractères mot pour dire la variable mot égale et on mettra une concaténation JavaScript Et on récupère le texte saisi dans la zone de texte. document.getElementById mot.value. Dans ce cas, le texte qui sera saisi ici sera passé automatiquement à la méthode send. Et nous avons nommé la variable qui va accueillir cette zone de texte mot. Mais quand on a des choses à envoyer au serveur, il faut impérativement intercaler la méthode setRequestHeader. Ici. Il contient 2 arguments. Le premier, il a la valeur content-type, et dans le deuxième, on mettra la chaîne suivante: application/x-www-form-urlencoded. En fait, cette méthode permet de formater la requête passée au serveur. Dans ce cas, cette requête subira une transformation en lui appliquant l'encodage de l'URL afin d'encoder les caractères spéciaux comme les espaces ou les symboles. Et avant d'aller plus loin, on va faire un test pour voir si le code que nous avons saisi est correct. Dans contenu.php, on mettra un code PHP, par exemple echo test. Exécutons maintenant sur le navigateur. Bon, visiblement le code ne contient pas d'erreurs. Le traitement que l'on va faire maintenant dans contenu.php consiste à interroger la base de données afin de chercher les enregistrements qui commencent par le texte saisi par l'utilisateur. On va donc inclure la chaîne de connexion et ensuite on va préparer la requête de sélection. La table que je vais interroger est la suivante. Elle s'appelle glossaire. Elle contient le glossaire que j'ai inclus sur mon site web. Et on va s'intéresser à la colonne desc ou bien description. Bon, ce qu'on va mettre, SELECT desc from Glossaire WHERE le champ desc LIKE le marqueur interrogatif. Bien sûr, on va remplacer le marqueur interrogatif au moment de l'exécution. Et comme d'habitude, on va déclarer la méthode setFetchMode en lui passant la constante de classe FetchAssoc afin de récupérer un tableau associatif. Et on exécute. Le paramètre à envoyer n'est rien d'autre que le texte qui a été récupéré dans la zone de texte et qui a été envoyé via la méthode send. Dans ce cas, cette variable s'appelle mot. Alors on va la récupérer classiquement avec du PHP. Comme ça, et on met ici mot. Et n'oubliez pas que l'objectif c'est que la description ne correspondra pas forcément au texte saisi par l'utilisateur, mais il faut que celui-ci, c'est-à-dire le texte saisi par l'utilisateur, figure au début de la description. Alors on va ajouter le symbole pourcentage pour dire que l'enregistrement doit commencer par $mot. On va aussi éliminer les espaces de début et de fin afin de ne pas fausser le traitement. On mettra la fonction Trim. Et ensuite on va récupérer le jeu de données qu'on va mettre dans le tableau tab. Après on va afficher ces enregistrements. Comme ceci. Exécutons pour voir le résultat. On mettra par exemple H et on constate bien qu'il nous affiche quelque chose. Bon, le problème c'est qu'il a affiché plusieurs enregistrements dans la même ligne. On va essayer de formater ça ici. On mettra par exemple la balise div comme caténer. La balise div est une balise bloc qui va forcer les enregistrements à se mettre dans des lignes différentes. Réexécutons. Quand je mets H, ça m'affiche hypertext markup language, etc. Quand je mets par exemple I, bon, visiblement il n'y a pas d'enregistrement qui commence par un I. Par exemple W, voilà, voilà, on constate bien qu'il est en train d'affiner les résultats. Alors jusqu'ici je crois que ça marche. Maintenant on va essayer d'améliorer le rendu. Bon, vous avez constaté que quand j'écris rien du tout, bon, il y a tous les enregistrements qui s'affichent et ça correspond pas vraiment à ce que l'on attend. Donc ce qu'on va faire, c'est masquer cette div dans un premier temps avec du CSS. On mettra visibility hidden. Donc maintenant la div est masquée. Bon, même si je mets quelque chose, on imagine que AJAX est en train de tourner, les résultats sont affichés mais ils sont masqués avec du CSS. Alors quand est-ce que cette div sera affichée? C'est uniquement s'il y a des enregistrements qui ont été retournés depuis la base de données. Alors on va venir ici et on va faire un test, par exemple if xhr. ResponseText égale à une chaîne vide, dans ce cas on va continuer quand même à masquer la div. Sinon On va l'afficher et on mettra dedans la réponse du serveur. Donc je vais copier ça et je remplace hidden par visible. Voyons ce que ça donne quand je mets H. Ça marche pas, j'ai dû commettre une erreur quelque part. Voilà, getElementById, c'est ça. En réexécutant Avec un H, c'est bien, ça affiche bien des résultats. Et quand je mets par exemple I comme tout à l'heure, donc puisqu'il y a aucun enregistrement qui correspond à I, dans ce cas la div est masquée. Alors c'est bien, et pourtant quand la zone de recherche est vide, il y a quand même les enregistrements qui sont affichés. On va donc faire notre test, on va le faire ici, on va vérifier si cette zone de texte contient quelque chose. On va mettre if .value égale à une chaîne vide, ça veut dire si l'utilisateur n'a rien saisi ici, on va masquer la div, on va prendre juste ce code. Sinon, dans ce cas, on va procéder au traitement qu'on a déjà fait. Tout ça, c'est placé entre les accolades. En réexécutant, Donc quand je mets un i, je n'ai rien. Quand j'ai un h, c'est bien. Et quand c'est vide, je n'ai aucun affichage non plus. Alors jusque-là, je crois que c'est OK. Une dernière chose à ajouter, c'est que puisque j'ai des suggestions, alors je suis pas censé tout écrire manuellement. Il suffit de cliquer sur une d'entre elles et elle sera automatiquement saisie. D'ailleurs, c'est l'objectif même de la saisie automatique. On va faire ça avec du JavaScript. Alors quand j'aurai cliqué sur une de ces divs, le contenu texte qu'il contient sera appliqué automatiquement dans la zone de texte. Donc on va venir là et on va mettre un code JavaScript. On va détecter l'événement clic sur l'une des divs retournées par le PHP. Alors on va cibler le parent de ces divs qui est l'objet $suc. On mettra document.getElementById .onclick, on mettra une fonction anonyme. Figurez-vous bien que j'ai placé ce code JavaScript après l'intégration de l'objet, sinon ça marcherait pas. Et là, je vais affecter à cette zone de texte le contenu qui a été cliqué par l'utilisateur. Je mettrai document.value. Et le contenu qui est cliqué par l'utilisateur, on va le récupérer à l'aide de l'objet event de sous-objet target qu'on a déjà traité dans la vidéo consacrée à l'objet event en JavaScript, .textContent. Dans ce cas, il va récupérer uniquement le texte qui figure dans l'objet le plus profond qui figure dans le parent sug. Dans ce cas, l'objet le plus profond, c'est rien d'autre que chacune des divs qui ont été intégrées dynamiquement avec du PHP. En réexécutant, quand je mets un H, je clique, on voit bien que ça se copie automatiquement. La même chose ici. Alors je crois que c'est bon. J'espère que vous avez compris le principe. Donc je rappelle, l'idée c'est récupérer des réponses texte depuis le serveur en utilisant AJAX, mais ces réponses-là seront générées dynamiquement via des scripts CGI. Dans notre cas, nous nous sommes servis du PHP avec bien sûr tout le potentiel de ce dernier en ce qui concerne l'interrogation des bases de données et tout le reste. Merci pour votre attention et à la vidéo prochaine.
