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
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?
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);
}
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
Merci Jo pour la remarque
. En cherchant son nom, on devrait retomber dessus.
Cela fait 3x que celui qui a fait la lib change le lien, j’arrête d’essayer de le rattraper sur la toile
Fabien
il marche sur mobile ces composants
merci
Sûrement, mais le rendu que l’on veut faire pour un autocomplete en web et sur mobile est sûrement différent
Fabien
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.