El autocompletado de amp sugiere resultados completos de acuerdo con la entrada proporcionada por el usuario mientras escribe. Es una función muy común y útil, ya que permite a los usuarios completar la tarea más rápidamente. Esto es extremadamente útil cuando el usuario no conoce el rango completo de la entrada.
Scripts requeridos: importe el componente amp-autocompletar –
HTML
<script async custom-element="amp-autocomplete" src= "https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> </script>
Importe el componente de forma de amplificador:
HTML
<script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
Uso:
- amp-autocompletar debe estar anidado en un formulario.
- El formulario debe contener un campo de entrada con una etiqueta de entrada o una etiqueta de área de texto.
- Una fuente de datos debe ser un objeto JSON que contenga un elemento de propiedad de array.
- Una fuente de datos se puede especificar con una etiqueta child script type=”application/json” o se puede especificar a través de la etiqueta src.
Usando script secundario type=”application/json” –
HTML
<form class="sample-form" method="post"
action-xhr=
"https://amp.dev/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="substring">
<input>
<script type="application/json">
{
"items": ["geeksforgeeks", "gfg",
"iamageek" ,"how to become a geek?"]
}
</script>
</amp-autocomplete>
</form>
Usando la etiqueta src –
HTML
<form class="sample-form" method="post" action-xhr= "https://amp.dev/documentation/examples/api/echo" target="_top"> <!--the following src link contains names of cities--> <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json"> <input> </amp-autocomplete> </form>
Ejemplo 1:
HTML
<!doctype html>
<html amp>
<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>Google AMP amp-autocomplete</title>
<style amp-custom>
:root {
--space-1: .5rem;
/* 8px */
--space-2: 1rem;
/* 16px */
--space-3: 1.5rem;
/* 24px */
--space-4: 2rem;
/* 32px */
}
.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>
</head>
<body>
<form class="sample-form" method="post"
action-xhr=
"https://amp.dev/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="substring">
<input>
<!-- Auto suggestion strings
stored in item-->
<script type="application/json">
{
"items": ["geeksforgeeks",
"gfg", "iamageek",
"how to become a geek?"]
}
</script>
</amp-autocomplete>
</form>
</body>
</html>
Producción
Ejemplo 2:
HTML
<!doctype html>
<html amp>
<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>Google AMP amp-autocomplete</title>
<style amp-custom>
:root {
--space-1: .5rem;
/* 8px */
--space-2: 1rem;
/* 16px */
--space-3: 1.5rem;
/* 24px */
--space-4: 2rem;
/* 32px */
}
.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>
</head>
<body>
<form class="sample-form" method="post"
action-xhr=
"https://amp.dev/documentation/examples/api/echo"
target="_top">
<!--the following src link contains
names of cities-->
<amp-autocomplete filter="substring"
src="/static/samples/json/amp-autocomplete-cities.json">
<input>
</amp-autocomplete>
</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