La mayoría de las sugerencias automáticas en los sitios serían strings normales, pero a veces los usuarios buscan más que, s, donde esto se convierte en sugerencias automáticas útiles de contenido enriquecido, brindan más información y claridad. Google AMP facilita a los desarrolladores el uso de esta opción mediante amp-autocompletar.
- Guiones requeridos:
- Importación del componente amp-autocompletar.
<scriptasynccustom-element="amp-autocomplete"src=</script> - Importación del componente de forma de amplificador.
<scriptasynccustom-element="amp-form"</script>
Para sugerir contenido enriquecido usando amp-autocompletar, pasamos los datos a una array de JsonObjects en elementos como se indica a continuación
{ "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
}
] }
La visualización de estos datos se proporciona a través de una plantilla como se indica a continuación.
<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>
Ejemplo:
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<link rel="canonical"
href=
"https://amp.dev/documentation/examples/components/amp-autocomplete/index.html" />
<meta name="viewport"
content="width=device-width,
minimum-scale=1,
initial-scale=1" />
<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>
<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 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>
</head>
<body>
<form class="sample-form"
method="post"
action-xhr=
"https://amp.dev/documentation/examples/api/echo" target="_top">
<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>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA