Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Auto-complétion avec AngularJS

AngularJS est la star du moment dans le monde des frameworks JavaScript (les puristes considéreront que c’est plutôt Backbone.js), en tout cas c’est avec lui que je joue depuis quelques mois déjà, j’en avais parlé d’ailleurs il y a quelques temps dans ce billet : AngularJS, oui mais …

Aujourd’hui je vous fais un retour d’expérience sur la façon de mettre en place l’auto-complétion avec AngularJS, je proposerai trois façons de faire :

  1. une première façon simple et native avec HTML5 et sa balise datalist
  2. une seconde façon avec Angular-UI et son composant Typeahead (UI-Bootstrap)
  3. une dernière plus complète avec jQuery-UI et son composant Autocomplete

autosuggest-with-angularjs

Les trois façons de faire n’offrent pas les mêmes possibilités, mais selon les besoins vous saurez à présent comment vous y prendre avec une des solutions présentées.

Dans les trois exemples, le contrôleur AngularJS est identique afin de faciliter la compréhension de la mise en place, les noms des cartes sont « en dur » mais elles peuvent très bien être récupérer de façon dynamique comme une requête vers votre Web API :

HTML5 et datalist

La mise en place de l’auto-complétion avec la balise datalist est automatique, c’est d’ailleurs la raison pour laquelle elle a été créée avec HTML5, il suffit simplement d’avoir une zone de saisie qui référence une liste de valeurs possible (attribrut list).

Ensuite AngularJS intervient simplement pour récupérer dans son scope la valeur de saisie ou le choix que l’utilisateur a fait en choisissant une suggestion proposée ($scope.card) et la façon dont les suggestions sont récupérées ($scope.cardslist) :

Voir plus bas pour les sources complètes.

UI-Bootstrap et Typeahead

Ui-Bootstrap est le portage des composants JavaScript de Twitter Bootstrap en directives AngularJS, le composant Typeahead est donc l’équivalent de celui que l’on connait déjà avec Twitter Bootstrap, simple et rapide à mettre en place, en une ligne c’est plié.

Voir plus bas pour les sources complètes.

jQuery-UI et Autocomplete

Pour intégrer facilement ce composant à AngularJS il faut créer une directive en encapsulant le mécanisme du composant Autocomplete afin qu’il interagisse correctement avec le scope d’AngularJS (ce qu’a fait l’équipe d’Angular-UI en partant des composants de Twitter Bootstrap).

Directive CardAutocomplete

Code HTML qui utilise cette directive

Sources

J’ai opté dans mon projet de ce troisième choix car il offre beaucoup plus de possibilités et surtout la personnalisation de l’affichage des suggestions, ce qui est un plus non négligeable.

Et vous ? vous vous y prenez comment ?

Sources complètes à télécharger

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 2 août 2013, 12 12

    Hey ! Ça fait plaisir de te revoir ici !

    Réponds !

  • Mimie 2 août 2013, 13 01

    Grave, il fait plaiz’ ce blog 🙂

    Réponds !

  • Thierry 15 février 2016, 16 04

    Pour ma part je préfère BOOTSTRAP UI
    Merci pour ce Tuto, j’aimerai également apporter ma petite aide, pour cela j’ai modifié un peu le script.

    Il faut savoir que la version 1.1.2 de Bootstrap avec la version 1.5 d’Angularjs à priori n’apprécie pas « data-typeahead » mais travaille avec « uib-typeahead ». d’autre part pour interagir avec plusieurs autocompletes il est préférable de créer un objet pour ngModel et non un nom simple.

    Voici le sript

    Pour index.html

    DGEDL AngularJS Aucomplétion


    SITE

    Ticket

    Devis

    {{site}}

    pour le controller
    var module = angular.module(‘app.controllers’, [‘ui.bootstrap’]);

    /**
    * Controlleur des cartes.
    */

    module.controller(‘CardController’, [‘$scope’,’$filter’, function($scope,$filter) {

    // mock des cartes dans lesquelles rechercher
    var siteslist = [
    {‘id’:’1′, ‘name’ : ‘Skylasher’ },
    {‘id’:’2′, ‘name’ : ‘Thrashing Mossdog’ },
    {‘id’:’3′, ‘name’ : ‘Zhur-Taa Druid’ },
    {‘id’:’4′, ‘name’ : ‘Feral Animist’ },
    {‘id’:’5′, ‘name’ : ‘Rubblebelt Maaka’ },
    {‘id’:’6′, ‘name’ : ‘Mending Touch’ },
    {‘id’:’7′, ‘name’ : ‘Weapon Surge’ },
    {‘id’:’8′, ‘name’ : ‘Woodlot Crawler’ },
    {‘id’:’9′, ‘name’ : ‘Phytoburst’ },
    {‘id’:’10’, ‘name’ : ‘Smelt-Ward Gatekeepers’ },
    {‘id’:’11’, ‘name’ : ‘Debt to the Deathless’ },
    {‘id’:’12’, ‘name’ : ‘Woodlot Crawler’ },
    {‘id’:’13’, ‘name’ : ‘Blaze Commando’ },
    {‘id’:’14’, ‘name’ : ‘Uncovered Clues’ }
    ];

    var ticketslist = [
    {‘id’:’1′, ‘name’ : ’10’ },
    {‘id’:’2′, ‘name’ : ’11’ },
    {‘id’:’3′, ‘name’ : ’12’ },
    {‘id’:’4′, ‘name’ : ’13’ },
    {‘id’:’5′, ‘name’ : ’14’ },
    {‘id’:’6′, ‘name’ : ’15’ },
    {‘id’:’7′, ‘name’ : ’16’ },
    {‘id’:’8′, ‘name’ : ’17’ },
    {‘id’:’9′, ‘name’ : ’18’ },
    {‘id’:’10’, ‘name’ : ’19’ },
    {‘id’:’11’, ‘name’ : ’20’ },
    {‘id’:’12’, ‘name’ : ’21’ },
    {‘id’:’13’, ‘name’ : ’22’ },
    {‘id’:’14’, ‘name’ : ’23’ }
    ];

    var devislist = [
    {‘id’:’1′, ‘name’ : ’10’, ‘site’ : ‘1’ },
    {‘id’:’2′, ‘name’ : ’11’, ‘site’ : ‘2’ },
    {‘id’:’3′, ‘name’ : ’12’, ‘site’ : ‘3’ },
    {‘id’:’4′, ‘name’ : ’13’, ‘site’ : ‘4’ },
    {‘id’:’5′, ‘name’ : ’14’, ‘site’ : ‘5’ },
    {‘id’:’6′, ‘name’ : ’15’, ‘site’ : ‘6’ },
    {‘id’:’7′, ‘name’ : ’16’, ‘site’ : ‘7’ },
    {‘id’:’8′, ‘name’ : ’17’, ‘site’ : ‘8’ },
    {‘id’:’9′, ‘name’ : ’18’, ‘site’ : ‘9’ },
    {‘id’:’10’, ‘name’ : ’19’, ‘site’ : ’10’ },
    {‘id’:’11’, ‘name’ : ’20’, ‘site’ : ’11’ },
    {‘id’:’12’, ‘name’ : ’21’, ‘site’ : ’12’ },
    {‘id’:’13’, ‘name’ : ’22’, ‘site’ : ’13’ },
    {‘id’:’14’, ‘name’ : ’23’, ‘site’ : ’14’ }
    ];

    $scope.list = {
    site : null,
    ticket : null,
    devis : null,
    siteslist : siteslist,
    ticketslist : ticketslist,
    devislist : devislist
    };

    $scope.onSelectSite = function ($item, $model, $label, $event) {
    $scope.list.ticket = null;
    $scope.list.devis = null;
    }

    $scope.onSelectTicket = function ($item, $model, $label, $event) {
    var resultat = $filter(‘filter’)(siteslist, {id: $item.id}, true);
    $scope.list.site = {‘id’:resultat[0].id, ‘name’ : resultat[0].name };
    $scope.list.devis = null;
    }

    $scope.onSelectDevis = function ($item, $model, $label, $event) {
    var resultat = $filter(‘filter’)(siteslist, {id: $item.site}, true);
    $scope.list.site = {‘id’:resultat[0].site, ‘name’ : resultat[0].name };
    $scope.list.ticket = null;
    }

    }]);

    Merci encore.

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Salut Ben, Peut-être, je ne me souvenais plus que tu m'en avais parlé, mais bonne perle sympathique en effet…Déc 7, 21:33
  • etienne minsongo mendo: “Bsr à tousje suis Etienne Minsongo apprenti programmeur! je voudrais savoir: le serveur local XAMPP.... aurait-il des inconvénients?Déc 7, 15:45
  • Benjamin: “+1 J'avoue m'être bien marré devant ce film il y a quelque temps, je te l'avais conseillé non ?…Déc 7, 08:18
  • Chris: “Bonjour, Quel est le nom de la table du plugin W3Total Cache car je ne la trouve…Déc 1, 09:22
  • Greg: “Liens de l'article mis à jour.Nov 27, 14:32
  • Greg: “Vraiment pénible ce problème. Pour ma part je l'ai résolu en créant un raccourci manuel dans mes favoris et en…Nov 20, 23:28
Share This