Système d’auto complétion avec Ionic et Angular

Découvre comment mettre en place un système d’auto complétion dans une application Ionic Angular. Cette fonctionnalité est très utilisée. Elle permet de proposer une saisie de formulaire plus rapide à l’utilisateur. Ceci en lui proposant des suggestions pertinentes en fonction de ce qu’il écrit dans un champ de saisie. Tout cela doit évidemment se faire en temps réel pour offrir une expérience riche et fluide lors de l’utilisation de cette fonctionnalité.

Le principe du système d’auto complétion

Avant de ce lancer dans le vif du sujet, regardons ensemble en premier, quel est le principe de fonctionnement d’un système d’auto complétion. Il est essentiel de bien comprendre comme cela fonctionne pour pouvoir ensuite le programmer.

1. Détection le changement dans le champ de saisie

Cette étape est primordiale! C’est seulement au moment ou l’utilisateur va modifier le contenu textuel qui se situe dans un champ de saisie. Ainsi, on vas pouvoir déclencher toute la logique de notre système d’auto complétion. C’est donc sur cette événement que tous va reposer.

2. Récupérer la valeur du champ de saisie

À cette étape ce qu’il faut identifier, c’est uniquement la valeur saisie dans le champ de recherche. Avec cette valeur, nous allons déclencher dans une prochaine étape, la logique qui permet de proposer des suggestions à l’utilisateur.

3. Identifier les données à proposer

Cette étape est le cœur de la logique du système. C’est ici qu’il va falloir interagir avec un fournisseur de lot de donnée (api). Et egalement extraire uniquement les informations pertinentes en rapport avec la valeur saisie par l’utilisateur dans le champ de recherche. Une fois ces informations retrouvées, nous allons pouvoir les afficher à l’utilisateur.

4. Afficher les choix possibles

Ici, le but, c’est d’afficher les possibilités trouvées lors de l’étape précédente. Pour cela, on peut designer une liste déroulante ou quelque chose de similaire qui nous permettra de récupérer le choix de l’utilisateur lors du clique sur une des propositions.

5. Récupérer le choix de l’utilisateur

C’est la dernière étape. C’est ici que l’on connaît la véritable valeur qu’il va falloir récupérer lors du choix de l’utilisateur. On utilisera pour cela un événement de type « click » pour identifier la proposition retenue et ainsi l’ajouter dans un formulaire avant d’effectuer l’affichage final.

Implémentation dans Angular avec Ionic

Maintenant, que l’on a bien toutes les étapes en tête, il est plus facile d’implémenter cette fonctionnalité. On va tout d’abord mettre en place le HTML de base qui va nous permettre d’initialiser le processus du système d’auto complétion.

La partie HTML dans Angular

Avec ce petit bout de HTML, on va pouvoir mettre en place la logique de notre système d’auto complétion. On a en première ligne un Input avec un eventListener de type ion-Input qui sera déclencher à chaque événement de clavier sur l’input.

Doc Ionic: Ion-Item / Events: https://ionicframework.com/docs/api/input#events

Ensuite, nous avons une liste qui possède un attribut hidden pour la gestion de l’affichage. Cette liste contient une itération de l’élément Ion-Item. L’élément Ion-Item est le responsable de l’affichage du choix, mais possède aussi un eventListener de type click pour détecter le choix de l’utilisateur lors du clique sur un des éléments.

La partie Typescript dans Angular

Ici le fichier Typescript que j’ai bien commenté pour que tu puisses bien comprendre la logique.

En gros, on a deux méthodes : inputChanged($event) et selected(item) qui vont s’occuper de tout. Nous avons aussi défini une liste vide avec public items: any[] = [] et un formulaire reactif Angular juste en dessous (n’oublie pas d’importer le module ReactiveFormModule dans le fichier app.module.ts si cela n’est pas encore fait).

Ce bout de code utilise un service qui permet d’interagir avec une API qui nous donnera le lot de donnée à filtrer avant de faire la proposition des choix possible à l’utilisateur. 

Ce service n’est pas très important je ne le présente donc pas en détail dans l’article mais tu le retrouvera dans le code source de l’exemple.

En vidéo

J’ai implémenté dans un projet Ionic Angular cette solution et je montre dans une vidéo que j’ai posté sur youtube à quel point c’est facile à faire.

Tu pourras ainsi probablement mieux suivre les étapes qui permettent d’implémenter facilement cette logic de manipulation de donnée pour faire un système d’auto complétion.

Lien de la vidéo: Autocomplete – Tuto Ionic / Angular

Conclusion

Presque trop facile!! On n’aura pas eu besoin de plus de deux méthodes et 6 lignes de HTML pour mettre en place un système d’auto complétion. Le résultat est bluffant et offre à l’utilisateur une meilleure expérience d’utilisation.

Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.

On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise

Comme d’habitude, je te laisse aussi un exemple de projet Ionic Angular qui présente le fonctionnement de ce sytème d’auto complétion. Tu le retrouveras sur mon Github sous le lien suivant: https://github.com/FazioNico/ionic-autocomplete

Tu peux aussi t’inscrire sur mon channel Slack pour y poser tes questions et discuter avec d’autres développeurs: Invitation à rejoindre mon Channel Slack (cette invitation expire le 2 mars 2021).

Et n’hésite pas à me laisser tes commentaires et remarque juste en dessous. C’est pour cela que j’ai activé la fonctionnalité dans mon wordpress 😉