How to automatically suggest rich content when searching in Google AMP using CSS
CSS How to Automatically Suggest Rich Content When Searching in Google AMP
To automatically suggest rich content to users when typing in a field, we will use the Google AMP Framework’s “amp-autocomplete” script. Autocompleting an input field means suggesting related content to the user as they begin typing.
Let’s discuss this method using an example, as shown below.
Method
We’ll use the “amp-autocomplete” script to add auto-suggested rich content to our webpage. We’ll also use the “amp-form” script from the Google AMP Framework to use its amp-form component and display it in the user interface, and “amp-mustache” to provide us with a template to use in our webpage.
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 feature, which helps us add rich auto-suggestions to web pages.
- Script to load amp-form –
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
This script loads the amp-form component from the Google AMP Framework, which we can then use in our application.
- Script to load amp-project –
<script async src="https://cdn.ampproject.org/v0.js"></script>
This script loads amp-project, which enables us to use the various features of the Google AMP Framework.
- Loading the 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 work with templates in HTML files.
We will take a complex data example, such as the JSON object below, and use this data to pass to amp-autocomplete to give suggested results.
JSON Object Used –
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
We’ll then use the amp-form component and pass in a JSON object to give us autosuggested results. We’ll use the AMP Mustache template format, as shown below.
<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:
Filename: index.html
<!DOCTYPE html>
<html amp>
<head>
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script> <script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<title>How to auto suggest rich contents while searching in Google AMP?</title>
</head>
<body>
<form>
<label>
<span>Enter content to get auto-suggest results</span>
<input type="search" name="name" />
<script type="application/json">
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
</script>
<template type="amp-mustache" id="amp-template-custom">
<div data-value="{{name}}, {{country}}">
{{name}}, {{country}}
</div>
</template>
</amp-autocomplete>
</label> </form>
</body>
</html>
Conclusion
In this article, we learned about Google AMP and used different scripts in the Google AMP framework, including “amp-autocomplete,” “amp-form,” “amp-mustache,” and “amp-project,” to automatically recommend rich content during Google AMP searches.