Présentation de l'exercice auto complétion

Parent Previous Next


Présentation de l'exercice



Les technologies à employer

Avant de commencer, il nous faut déterminer le type de technologie dont nous avons besoin, car ici nous ne faisons pas uniquement appel au Javascript, nous allons devoir employer d'autres langages.


Dans un cadre général, un système d'auto-complétion fait appel à trois technologies différentes :


Dans notre cas, nous allons utiliser le Javascript ainsi que le PHP (bien que n'importe quel autre langage serveur soit capable de faire son travail). Nous allons, en revanche, faire une petite entorse au troisième point en utilisant un fichier de stockage plutôt qu'une base de données, cela pour une raison bien simple : simplifier notre code, surtout que nous n'avons pas besoin d'une base de données pour le peu de données à enregistrer.


Principe de l'auto-complétion


Un système d'auto-complétion se présente de la manière suivante :



Google a mis en place un système d'auto-complétion sur son moteur de recherche



Le principe est simple mais efficace : dès qu'un utilisateur tape un caractère dans le champ, une recherche est immédiatement effectuée et retournée au navigateur. Ce dernier affiche alors les résultats dans un petit cadre généralement situé sous le champ de recherche. Les résultats affichés peuvent alors être parcourus, soit par le biais des touches fléchées du clavier (haut et bas), soit par le biais du curseur de la souris. Si on choisit un des résultats listés, celui-ci est alors automatiquement écrit dans le champ de recherche en lieu et place de ce qui avait été écrit par l'utilisateur. Il ne reste alors plus qu'à lancer la recherche.


L'avantage de ce type de script, c'est que l'on gagne un temps fou : la recherche peut être effectuée en tapant seulement quelques caractères. Cela est aussi très utile lorsque l'on ne connaît qu'une partie du terme recherché ou bien quand on fait une faute de frappe.


Conception


Nous connaissons le principe de l'auto-complétion et les technologies nécessaires. Cependant, cela n'explique pas comment tout cela doit être utilisé. Nous allons donc vous guider pour vous permettre de vous lancer sans trop d'appréhension dans ce vaste projet.


L'interface


Commençons par l'interface ! De quoi allons-nous avoir besoin ? L'auto-complétion étant affiliée, généralement, à tout ce qui est du domaine de la recherche, il va nous falloir un champ de texte pour écrire les mots-clés. Cependant, ce dernier va nous poser problème, car le navigateur enregistre généralement ce qui a été écrit dans les champs de texte afin de vous le reproposer plus tard sous forme d'auto-complétion, ce qui va donc faire doublon avec notre système…


Heureusement, il est possible de désactiver cette auto-complétion en utilisant l'attribut autocomplete de cette manière :

<input type="text" autocomplete="off" />


À cela nous allons devoir ajouter un élément capable d'englober les suggestions de recherches. Celui-ci sera composé d'une balise <div> contenant autant de <div> que de résultats, comme ceci :

<div id="results">

  <div>Résultat 1</div>

  <div>Résultat 2</div>

</div>


Chaque résultat dans les suggestions devra changer d'aspect lorsque celui-ci sera survolé ou sélectionné par le biais des touches fléchées.


En ce qui concerne un éventuel bouton de type submit, nous allons nous en passer, car notre but n'est pas de lancer la recherche, mais seulement d'afficher une auto-complétion.


À titre d'information, puisque vous allez devoir gérer les touches fléchées, voici les valeurs respectives de la propriété keyCode pour les touches HautBas et Entrée : 38, 40 et 13.


La communication client/serveur


Contrairement à ce que l'on pourrait penser, il ne s'agit pas ici d'une partie bien compliquée car, dans le fond, qu'allons-nous devoir faire ? Simplement effectuer une requête à chaque caractère écrit afin de proposer une liste de suggestions. Il nous faudra donc une fonction liée à l'événement keyup de notre champ de recherche, qui sera chargée d'effectuer une nouvelle requête à chaque caractère tapé.


Cependant, admettons que nous tapions deux caractères dans le champ de recherche, que la première requête réponde en 100 ms et la seconde en 65 ms : nous allons alors obtenir les résultats de la première requête après ceux de la seconde et donc afficher des suggestions qui ne seront plus du tout en accord avec les caractères tapés dans le champ de recherche. La solution à cela est simple : utiliser la méthode abort()sur la précédente requête effectuée si celle-ci n'est pas terminée. Ainsi, elle ne risque pas de renvoyer des informations dépassées par la suite.


Le traitement et le renvoi des données


Côté serveur, nous allons faire un script de recherche basique sur lequel nous ne nous attarderons pas trop, le PHP n'étant pas notre priorité. Le principe consiste à rechercher les villes qui correspondent aux lettres entrées dans le champ de recherche. Nous vous avons conçu une petite archive ZIP dans laquelle vous trouverez un tableau PHP linéarisé contenant les plus grandes villes de France, il ne vous restera plus qu'à l'analyser.


Telecharger l'archive !


La linéarisation d'une variable en PHP permet de sauvegarder des données sous forme de chaîne de caractères. Cela est pratique lorsque l'on souhaite sauvegarder un tableau dans un fichier, c'est ce que nous avons fait pour les villes. Les fonctions permettant de faire cela se nomment serialize() et unserialize().


Le PHP n'étant pas forcément votre point fort (après tout, vous êtes là pour apprendre le Javascript), nous allons tâcher de bien détailler ce que vous devez faire pour réussir à faire votre recherche.


Tout d'abord, il vous faut récupérer les données contenues dans le fichier towns.txt (disponible dans l'archive fournie plus haut). Pour cela, il va vous falloir lire ce fichier avec la fonction file_get_contents(), puis convertir son contenu en tant que tableau PHP grâce à la fonction unserialize().


Une fois cela fait, le tableau obtenu doit être parcouru à la recherche de résultats en cohérence avec les caractères tapés par l'utilisateur dans le champ de recherche. Pour cela, vous aurez besoin d'une boucle ainsi que de la fonction count() pour obtenir le nombre d'éléments contenus dans le tableau.


Pour vérifier si un index du tableau correspond à votre recherche, il va vous falloir utiliser la fonctionstripos(), qui permet de vérifier si une chaîne de caractères contient certains caractères, et ce sans tenir compte de la casse. Si vous trouvez un résultat en cohérence avec la recherche, alors ajoutez-le à un tableau (que vous aurez préalablement créé) grâce à la fonction array_push().


Une fois le tableau parcouru, il ne vous reste plus qu'à trier les résultats avec la fonction sort(), puis à renvoyer les données au client…


Oui, mais sous quelle forme ? XML ? JSON ?


Ni l'une, ni l'autre ! Tout simplement sous forme de texte brut !


Pourquoi ? Pour une raison simple : le XML et le JSON sont utiles pour renvoyer des données qui ont besoin d'être structurées. Si nous avions eu besoin de renvoyer, en plus des noms de ville, le nombre d'habitants, de commerces et d'administrations françaises, alors nous aurions pu envisager l'utilisation du XML ou du JSON afin de structurer tout ça. Mais dans notre cas cela n'est pas utile, car nous ne faisons que renvoyer le nom de chaque ville trouvée.


Alors comment renvoyer tout ça sous forme de texte brut ? Nous pourrions faire un saut de ligne entre chaque ville retournée, mais ce n'est pas spécialement pratique à analyser pour le Javascript. Nous allons donc devoir choisir un caractère de séparation qui n'est jamais utilisé dans le nom d'une ville. Dans ce TP, nous allons donc utiliser la barre verticale |, ce qui devrait nous permettre de retourner du texte brut sous cette forme :

Paris|Perpignan|Patelin-Paumé-Sur-Toise|Etc.


Tout comme join() en Javascript, il existe une fonction PHP qui vous permet de concaténer toutes les valeurs d'un tableau dans une chaîne de caractères avec un ou plusieurs caractères de séparation : il s'agit de la fonction implode(). Une fois la fonction utilisée, il ne vous reste plus qu'à retourner le tout au client avec un bon vieil echo et à analyser cela côté Javascript.


C'est à vous !


Maintenant que vous avez toutes les cartes en main, à vous de jouer ! N'hésitez pas à regarder la correction du fichier PHP si besoin, nous pouvons comprendre que vous puissiez ne pas le coder vous-mêmes sachant que ce n'est pas le sujet de ce cours.


Mais je commence par où ? Le serveur ou le client ?


Il est préférable que vous commenciez par le code PHP afin de vous assurer que celui-ci fonctionne bien, cela vous évitera bien des ennuis de débogage.


En cas de dysfonctionnements dans votre code, pensez bien à regarder la console d'erreurs et aussi à vérifier ce que vous a renvoyé le serveur, car l'erreur peut provenir de ce dernier et non pas forcément du client. 


Créé avec HelpNDoc Personal Edition: Générateur de documentation iPhone gratuit

Site à deux balles