Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content to the user during the typing of an input field, we will use the “amp-autocomplete” script from the Google AMP framework. Autocompleting an input field implies suggesting relevant content to the user as and when the user starts typing.
Let’s discuss the approach with an example, below −
Approach
We will use the “amp-autocomplete” script to add auto-suggestion of rich content on our webpage. We will also use the “amp-form” script from the Google AMP framework so as to use its amp-form component and display it in the UI, and the “amp-mustache” to give us the template to consume in the webpage.
Scripts Used Here
Script to load amp-autocomplete −
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> </script>
This script is used to load amp-autocomplete functionality which helps us to add auto-suggestion of rich content on our webpage.
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 is used to load amp-form component of the Google AMP framework, which we can then use the component in our application
Script to load amp-project −
<script async src="https://cdn.ampproject.org/v0.js"></script>
This script is used to load the amp-project which allows us to work with different functionalities of the Google AMP framework.
Script to load amp-mustache −
<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 our HTML file.
We will take a complex example of data, such as the JSON object below, and use this data to pass it to the amp-autocomplete to give out the suggested results.
JSON object used −
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
We will then use the amp-form component and feed the JSON object there to give us the auto-suggested results. We will be using the AMP mustache template formate like 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 below −
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>
<amp-autocomplete
filter="token-prefix"
filter-value="name"
min-characters="0">
<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 what is Google AMP, and we used it to auto suggest rich contents while searching in Google AMP using different scripts like “amp-autocomplete”, “amp-form”, “amp-mustache” and “amp-project” from the Google AMP framework.
59 Views
