Most of the auto-suggestions in sites would be normal strings but sometimes users look for more that, s, where this becomes useful rich content auto-suggestions, provide more information and clarity. Google AMP makes it easier for developers to use this option using amp-autocomplete.
-
Required Scripts:
-
Importing the amp-autocomplete component.
<
script
async
custom-element
=
"amp-autocomplete"
src
=
</
script
>
-
Importing the amp-form component.
<
script
async
custom-element
=
"amp-form"
</
script
>
To Suggest rich contents using amp-autocomplete we pass the data, s into an array of JsonObjects in items as given below
{ "items" : [ {
"city" : "Albany",
"state" : "New York",
"areaCode" : 518,
"population" : 98251
}, {
"city" : "Annapolis",
"state" : "Maryland",
"areaCode" : 410,
"population" : 39321
}, {
"city" : "Trenton",
"state" : "New Jersey",
"areaCode" : 609,
"population" : 84964
}
] } |
Display of these data are given through a template as given below
< template type = "amp-mustache" id = "amp-template-custom" >
< div class = "city-item" data-value = "{{city}}, {{state}}" >
< div >{{city}}, {{state}}</ div >
< div class = "custom-population" >Population: {{population}}</ div >
</ div >
</ template >
|
Example:
<!DOCTYPE html> < html ⚡>
< head >
< meta charset = "utf-8" />
< link rel = "canonical" href =
< meta name = "viewport"
content=" width = device -width,
minimum-scale = 1 ,
initial-scale = 1 " />
< script async custom-element = "amp-autocomplete" src =
</ script >
< script async custom-element = "amp-form" src =
</ script >
< title >geeksforgeeks | amp-autocomplete
</ title >
< style amp-custom>
:root {
--space-1: 0.5rem;
--space-3: 1.5rem;
--space-4: 2rem;
--color-text-light: #fff;
--color-primary: #005af0;
--box-shadow-1:
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 1px -1px rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.sample-form input[type="submit"] {
-webkit-appearance: none;
border: none;
background-color: var(--color-primary);
color: var(--color-text-light);
margin: var(--space-2);
font-family: "Poppins", sans-serif;
font-weight: 700;
line-height: 1.2em;
font-size: 1em;
padding: 0.75em 1.75em;
text-decoration: none;
text-align: center;
border-radius: 3px;
border: none;
box-shadow: var(--box-shadow-1);
}
.sample-form {
padding: var(--space-2);
}
</ style >
< style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</ style >
< noscript >
< style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</ style >
</ noscript >
</ script >
< script async custom-template = "amp-mustache" src =
</ script >
</ head >
< body >
< form class = "sample-form"
method = "post" action-xhr =
< label >
< span >Search for</ span >
< amp-autocomplete filter = "token-prefix" filter-value = "city"
min-characters = "0" >
< input type = "search" name = "city" />
< script type = "application/json" >
{
"items": [
{
"city": "kochi",
"state": "kerala",
"population": 2120000
},
{
"city": " hyderabad",
"state": "telangana",
"population": 6810000
},
{
"city": "surat",
"state": "gujarat",
"population": 4460000
}
]
}
</ script >
< template type = "amp-mustache"
id = "amp-template-custom" >
< div class = "city-item" data-value = "{{city}}, {{state}}" >
< div >{{city}}, {{state}}</ div >
< div class = "custom-population" >
Population: {{population}}
</ div >
</ div >
</ template >
</ amp-autocomplete >
</ label >
< input type = "submit" value = "Search" />
< div submit-success>
< template type = "amp-mustache" >
Successfully submitted {{city}}!
</ template >
</ div >
< div submit-error>
Error!
</ div >
</ form >
</ body >
</ html >
|
Output: