AutoComplete

L'Autocomplete propose des suggestions dynamiques à mesure que l'utilisateur tape. Il combine les avantages d'un champ de saisie libre et d'un sélecteur structuré, pour accélérer la saisie et réduire les erreurs.

Quand l'utiliser

• Formulaires de recherche : aider l'utilisateur à trouver rapidement un élément parmi une liste longue grâce aux suggestions automatiques.
• Saisie d'adresses : améliorer l'expérience en proposant des compléments d'adresse basés sur les caractères déjà saisis.
• Sélection de tags ou mots-clés : faciliter l'ajout de tags en suggérant des options existantes correspondant à la saisie en cours.
• Listes de données volumineuses : remplacer un select classique lorsque la liste contient trop d'entrées pour être parcourue confortablement.

Quand ne pas l'utiliser

• Listes courtes et fixes : pour des listes de moins de 5-7 options, préférer un Select ou des Radio buttons.
• Saisie libre sans référentiel : si l'utilisateur peut saisir n'importe quelle valeur sans correspondance dans une liste, utiliser un Input classique.
• Champs avec format contraint : pour des dates, numéros de téléphone ou codes postaux, préférer des composants spécialisés (Calendar, Input avec masque).

Les différents types / Variant

• L'Autocomplete avec données locales (data) filtre les suggestions côté client à partir d'un tableau de données déjà chargé. Idéal pour des listes courtes et statiques.
• L'Autocomplete avec suggestions asynchrones (getSuggestions) appelle une fonction asynchrone à chaque frappe pour récupérer des suggestions dynamiques depuis une API. Adapté aux grandes bases de données.
• L'Autocomplete avec debounce (debounceSuggestionsTimeout) retarde l'appel aux suggestions pour éviter des requêtes trop fréquentes lors de la frappe rapide.