Composant Flex – AutoCompletion sur un champ Texte (AutoComplete TextInput)

Pour vos applications, vous aurez peut-être besoin de proposer à l’utilisateur une liste de choix. Par exemple pour proposer une liste de pays dans un formulaire ou une liste de contacts. Pour afficher ces contacts, vous pouvez utiliser une ComboBox qui va créer un menu déroulant contenant tous les éléments de la liste. Si votre liste est importante, vous allez vouloir laisser l’utilisateur filtrer cette liste, par exemple, en rentrant les premières lettres du mot qu’il recherche. Ce type de champ avec auto-complétion (autocomplete) est par exemple utilisé par Google Suggest pour proposer les recherches les plus pertinentes au fur et à mesure de la frappe.Il y a aujourd’hui plusieurs composants Flex qui ont été crées pour faire cette auto-suggestion. En voici 3 qui paraissent les plus pertinents (du moins bon au meilleur)

Adobe AutoComplete Input

Le composant AutoComplete proposé par la Adobe Flex Team. Le composant est se comporte comme un champ texte avec un propriété dataProvider permettant d’assigner une ArrayCollection par exemple contenant toutes les suggestions

Attention, ce composant n’a pas été maintenu et peut comporter des bugs avec Flex 3

This movie requires Flash Player 11

Adobe AutoComplete Input sur Adobe Exchange

Version de ce composant modifiée pour être compatible avec Flex 3

CompleteInput de Kuwamoto

Un composant fonctionnement très bien sous Flex 3. Il dispose aussi d’autres options comme ignorer le mot-clé « The » pour les pays par exemple ou garder l’historique des textes tapés par l’utilisateur dans un Local Shared Object(LSO) grâce à la propriété keepLocalHistor. Dans l’exemple ci-dessous, vous pouvez par exemple taper un nom de famille (First) puis Entrée et si vous rechargez la page, il vous sera proposé en suggestion. Quelques bugs sont toujours présents, par exemple le fait de ne pas pouvoir cacher la liste des suggestions (lors d’un clic à l’extérieur par exemple).

This movie requires Flash Player 11

CompleteInput sur kuwamoto.org

Code source du CompleteInput

Flex AutoComplete Component (Hillel Coren)

Ce composant est de loin le plus complet et celui comprenant le plus d’options prédéfinies pour vous faciliter la tâche. Vous pouvez ainsi faire afficher un bouton « Parcourir » ou la multi-sélection de valeur etc. Vous pouvez aussi afficher un texte « prompt » qui est affiché quand l’utilisateur n’a pas encore entré de texte ou alors préciser une labelFunction qui va déterminer la chaîne à afficher. Ce composant peut être utilisé librement, sans copyright.

This movie requires Flash Player 11

Télécharger le fichier SWC du composant

Télécharger le code source du composant (zip)

En savoir plus sur le Composant Flex AutoComplete

8 réflexions au sujet de « Composant Flex – AutoCompletion sur un champ Texte (AutoComplete TextInput) »

  1. Cyril Gambis

    A noter qu’il y a une version corrigée de la version d’Adobe pour la rendre compatible Flex 3, ainsi qu’une version modifiée avec la gestion d’entrée qui ne seraient pas dans la liste

    http://snippets.dzone.com/posts/show/5973

    Merci pour le poste, et félicitation pour ton excellent site sur Flex.

    Cyril

  2. ROUSSEAU Stanislas

    J’utilise la première solution dans une application AVEC un component validator.
    Lorsque la propriété required du validator est à false, le component marche correctement.
    Lorsque la propriété est à true, à l’initialisation, j’obtiens des effets indésirables. En particulier, les méthodes surchargés commitproperties et updatedisplaylist sont appelés plus d’une fois, ce qui entraine une RAZ de la textinput lorque je veux ajouter un caractère.
    Connaissez-vous ce problème?

  3. Tom

    A noter qu’avec Flex 4, c’est quasiment natif dans le SDK .. suffit d’ajouter un service HTTP et hop !

    public var url:String;

    private var responder:EbHttpServiceResponder;

    override protected function textInput_changeHandler(event:TextOperationEvent):void
    {
    super.textInput_changeHandler(event);

    var q:String = textInput.text;

    if (this.responder == null)
    {
    this.responder = new EbHttpServiceResponder(onServiceComplete,EbHttpServiceResponder.JSON_PARSER);
    }

    EbHttpServices.getInstance().call(this.url + q,null,this.responder);
    }

    private function onServiceComplete(response:Array):void
    {
    this.dataProvider = new ArrayList(response);
    }

  4. Jo

    Bonjour,

    Un pti post pour prévenir que les dernier lien sont morts (les 2 derniers telechargements)

    Sinon comme d’hab, ton site est la bible FR d’adobe :D

  5. fnicollet Auteur de l’article

    Merci Jo pour la remarque :)
    Cela fait 3x que celui qui a fait la lib change le lien, j’arrête d’essayer de le rattraper sur la toile :P . En cherchant son nom, on devrait retomber dessus.

    Fabien

  6. fnicollet Auteur de l’article

    Sûrement, mais le rendu que l’on veut faire pour un autocomplete en web et sur mobile est sûrement différent

    Fabien

  7. Lucas

    Hi, im using this usefull « autocomplete » and it works very well.
    I just found a little issue when you want to change or update de « dataProvider » property.

    I got one solution doing this:
    [code]
    //-- debe cambiar a True porque sino no actualiza la lista ordenada
    sortedCandidatesDirty = true;
    [/code]

    in the line 240 inside « set dataProvider » method.

Les commentaires sont fermés.