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
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).
CompleteInput sur kuwamoto.org
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.
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
Autres Tutoriaux Flex liés:
- Flex UIComponent – Les Composants de type Texte (Label, Text, TextInput, TextArea, RichTextEditor)
- Flex UIComponent – Les Composants de type Liste (List, ComboBox, DataGrid, HorizontalList, TileList, Tree)
- Composant Flex – TextInput avec message quand le champ est vide (prompt)
- Contribuez à la communauté Adobe Flex, postez votre contenu sur flex-tutorial
- Flex Item Renderer – Item Renderer utilisant les composants Flex standard (Drop-In)
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
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?