Short video - Saisie automatique (autocomplete) en AJAX

7 Oct 2022 · 1 min

Watch on YouTube

1:28

In this French-language tutorial, the presenter explains how to build a server‑generated autocomplete feature using PHP CGI scripts and AJAX. The solution consists of three files: autocomplete.html, which contains the AJAX code to send user input to the server and display suggestions; contenu.php, which receives the AJAX request, queries a database for matching records using PDO; and connexion.php, which holds the PDO connection string. The presenter demonstrates a click event on the text input to fetch server responses, then shows how the system continuously monitors the typed string to provide real‑time suggestions from the database. The video emphasizes that the AJAX code mirrors a previous example for extracting plain text responses, and walks through a live browser test to verify the functionality.

Chapters

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 l'zone de texte afin de faire le test. Exécutons sur navigateur pour voir le résultat. Quand je clique sur l'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 l'zone de texte afin de chercher les correspondances dans la base de données.