How to automatically provide rich content suggestions when searching in Google AMP?

To implement auto-suggestions of rich content to the user while typing in the input field, we will use the "amp-autocomplete" script from the Google AMP framework. Autocomplete input fields means suggesting relevant content to the user as they start typing.

Let us discuss this method through an example as shown below −

method

We will use the "amp-autocomplete" script to add auto-suggestions for rich content on our pages. We will also use the Google AMP framework's "amp-form" script in order to use its amp-form component and display it in the UI, and "amp-mustache" to provide us with templates to use in our web pages.

The Chinese translation of

Scripts Used Here

is:

Scripts Used Here

• Load amp-autocomplete script −

<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js">
</script>

This script is used to load the amp-autocomplete function, which can help us add automatic suggestions for rich content on web pages.

• Load amp-form script −

<script async custom-element="amp-form"src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>

This script is used to load the amp-form component of the Google AMP framework, which we can use in our application

• Load amp-project script −

<script async src="https://cdn.ampproject.org/v0.js"></script>

This script is used to load amp-project, allowing us to use different features of the Google AMP framework.

• Load amp-mustache script −

<script async custom-template="amp-mustachesrc="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

This script is used to load the amp-mustache template, which allows us to use templates in HTML files.

We will use the JSON object below as an example of complex data and use this data to pass it to amp-autocomplete to provide suggested results.

JSON object usage -

{
   "items": [
      {
         "name": "Luffy",
         "country": "India"
      },{
         "name": "Nami",
         "country": "USA"
      },{
         "name": "Zoro",
         "country": "Canada"
      }
   ]
}

We will then use the amp-form component and pass it a JSON object to provide us with auto-suggested results. We will use the AMP mustache template format of the form -

<template type="amp-mustache" id="amp-template-custom">
   <div data-value="{{name}}, {{country}}">
      {{name}}, {{country}}
   </div>
</template>

Example

Our index.html file will look like this −

File name: index.html

   
   
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   
   


   

      
         Enter content to get auto-suggest results
         
            
            
            
         
      
   

in conclusion

In this post, we learned about what is Google AMP and we use it to use different scripts in Google AMP like "amp-autocomplete", "amp-form", "amp-mustache" and "amp-project") to automatically suggest rich content.

The above is the detailed content of How to automatically provide rich content suggestions when searching in Google AMP?. For more information, please follow other related articles on the PHP Chinese website!