The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
Le composant d'auto-complétion hérite de v-select et ajoute la capacité de filtrer les éléments.
Si vous utilisez des objets pour la propriété items, vous devrez probablement associer item-text et item-value aux propriétés correspondantes sur vos propres objets. Ces valeurs sont par défaut text et value mais peuvent être modifiées pour coller à votre structure de données.
La propriété auto de menu-props n'est supportée que pour le style d'inputs par défaut.
La saisie automatique du navigateur est désactivée par défaut, ceci peut varier selon les navigateurs et peut même être ignoré. MDN
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Connectez facilement des données dynamiques et créez une expérience unique. La liste de propriétés étendues de v-autocomplete permet d'adapter facilement et dans le détail tous les aspects de l'entrée.
La propriété filter peut être utilisée pour que chaque élément puissent être filtrer en suivant sa propre logique. Dans cet exemple nous filtrons des éléments par leur nom
Vous pouvez utiliser la propdense pour réduire la hauteur de l'autocomplete et la hauteur maximale inférieure des éléments de liste.
Avec la puissance des slots, vous pouvez personnaliser la sortie visuelle de la sélection. Dans cet exemple, nous ajoutons une image de profil pour les chips et les éléments de liste.
Parfois vous avez besoin de récupérer des données externes via une requête de recherche. Utilisez la propriété search-input avec le modificateur .sync quand vous utilisez la propriété autocomplete. On peut également utiliser la nouvelle propriété cache-items. Ceci gardera une unique liste de tous les éléments qui ont été passés à la propriété items et est REQUIRED lors de l'utilisation d’éléments asynchrones et de la propriété multiple.
Le composant v-autocomplete est extrêmement flexible et peut s'adapter à n'importe quel cas d'utilisation. Créez des affichages personnalisés pour no-data, item et selection pour fournir une expérience utilisateur unique. L'utilisation de slots vous permet de personnaliser facilement la recherche souhaitée pour votre application.
En utilisant une combinaison de pentes et de transitions v-autocomplete, vous pouvez créer un champ autocomplete élégant, comme ce sélecteur d'état.
Prêt pour plus ? Continuez la lecture avec :