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