Podemos verificar si se recibe una búsqueda en AMP con la ayuda de amp-autocompletar, que se puede usar para verificar los parámetros de consulta especificados con la ayuda de src y el atributo de consulta.
p.ej. si a src="https://www.iamageek.org/"y query="q", entonces un usuario que escriba geek obtendrá el resultado de buscar JSON dehttps://iamageek.com?q=geek
Cuando el atributo de consulta se combina con el atributo src, las entradas del usuario se pasan a un punto final generado estáticamente.
Guión requerido:
Importación del componente amp-autocompletar .
<script async custom-element="amp-autocomplete" src= "https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> </script>
Importación del componente de forma de amplificador .
<script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
Especificación de parámetros de consulta:
La entrada se proporciona a través de la etiqueta de entrada y se consulta utilizando la etiqueta de plantilla cuando se envía
<form class="sample-form"
method="post"
action-xhr="https://amp.dev/documentation/examples/api/echo"
target="_top">
<amp-autocomplete filter="none"
min-characters="1"
src="https://amp.dev/samples_templates/products_autosuggest"
query="q">
<input type="search"
name="queryInput">
</amp-autocomplete>
<input type="submit"
value="Search">
<div submit-success>
<template type="amp-mustache">
Success! Received <strong>{{queryInput}}</strong>.
</template>
</div>
</form>
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">
<amp-autocomplete filter="none"
min-characters="1"
src=
"https://amp.dev/samples_templates/products_autosuggest"
query="q">
<input type="search"
name="queryInput" />
</amp-autocomplete>
<input type="submit"
value="Search" />
<div submit-success>
<template type="amp-mustache">
Success! Received
<strong>{{queryInput}}</strong>.
</template>
</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