AMP supporte l\'Autocomplétion dans les formulaires de recherche

Les pages AMP peuvent désormais refléter plus étroitement le comportement des pages HTML régulières avec des autocomplétions pour la recherche et les formulaires.

AMP supporte l\'Autocompletion dans les formulaires de recherche

Un champ de saisie avec l’autocomplétion activée suggère des résultats complétés

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 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 :

{ \ »items\ »: [\ »a\ », \ »b\ » \ »c\ »] }

Exemple de code amp-autocomplete

Autres exemples de code d’importation dans le header

  1. Importer le composant “amp-autocomplete” :
  2. Importer le composant “amp-form” :
  3. Optionnel : le composant “amp-bind” est nécessaire pour modifier dynamiquement la source de données d\’un composant “amp-autocomplete” :
  4. Optionnel : le composant “amp-mustache” est nécessaire pour le rendu du contenu riche et côté client des réponses des formulaires :

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.

Auteur : Noel NGUESSAN

Je suis Noel Nguessan, fondateur du site Arobasenet.com qui existe depuis 2007 et a aujourd'hui plus de 6.800 articles. Pour ma part, j'ai intégré le monde de l'internet en 1997 en qualité de créateur de site internet, avant de devenir développeur web et multimédia au début de l'année 2000, avant de basculer naturellement vers le SEO en tant que Consultant.