Un champ de saisie avec l’autocomplétion activée suggère des résultats complétés correspondant à l'entrée de l'utilisateur lorsqu'ils tapent dans le champ de saisie.
Cette fonctionnalité peut aider l'utilisateur à s'acquitter de sa tâche plus rapidement.
Les données peuvent être récupérées à partir d'un point de terminaison JSON ou localement à partir de l'état AMP.
Comme vous le savez probablement de ce qui est une fonctionnalité commune dans les pages normales, cela peut grandement accélérer le temps qu'il faut pour terminer une requête.
L’autocomplétion AMP peut être utilisée pour alimenter des expériences de recherche sur place, ou sous forme de formulaires pour aider à assurer que les saisies livrent des résultats plus prédictifs.
Lorsqu'un utilisateur tape dans un champ de saisie avec l’autocomplétion AMP, des suggestions pertinentes apparaissent automatiquement sous le champ de saisie.
Cette fonctionnalité peut également être utilisée pour générer une liste de suggestions pour un champ d'entrée particulier.
Par exemple, une barre de recherche sur un site ecommerce AMP peut automatiquement suggérer les produits les plus populaires avec la fonctionnalité de l’autocomplétion.
L'extension d'autocomplétion AMP doit être utilisée pour suggérer des éléments terminés en fonction de la saisie de l'utilisateur pour aider les utilisateurs à effectuer leur tâche plus rapidement.
Cela peut être utilisé pour alimenter les expériences de recherche, dans les cas où l'utilisateur peut ne pas connaître la gamme complète des entrées potentielles, ou dans les formulaires pour aider à assurer les saisies où il peut y avoir plusieurs façons d'exprimer la même intention (en utilisant une abréviation d'état au lieu de son nom complet , par exemple) donnent des résultats plus prévisibles.
Exemple de code :
<amp-autocomplete filter="substring" id="myAutocomplete">
<input>
<script type="application/json">
{ "items": ["a", "b" "c"] } </script>
</amp-autocomplete>
Autres exemples de code d’importation dans le header
- Importer le composant “amp-autocomplete” :
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
- Importer le composant “amp-form” :
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
- Optionnel : le composant “amp-bind” est nécessaire pour modifier dynamiquement la source de données d'un composant “amp-autocomplete” :
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
- Optionnel : le composant “amp-mustache” est nécessaire pour le rendu du contenu riche et côté client des réponses des formulaires :
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"<>/script>
Utilisation de base
Un composant amp-autocomplete doit toujours être rattaché à un formulaire et avoir un champ d'entrée et une source de données (base de données).
Une source de données doit être un objet JSON contenant un élément de propriété de tableau, et peut être spécifiée en ligne avec une balise de type de script enfant, "application/json" ou un point de terminaison serveur spécifié avec un attribut “src”.
Pour en savoir plus sur les détails techniques du fonctionnement de cette fonctionnalité et sur la façon de la configurer, consultez la documentation officielle ici.
