Necesito un dropdown con autocomplete para una pagina AMP y no consigo tener labels/values asociados de ninguna manera. El autocomplete tal cual me funciona perfectamente pero lo que necesito es tener el value por detrás, aunque se asigne a un campo hidden.
Sé que es una descripción un poco vaga del problema pero no se me ocurre nada mejor, estaré al tanto para contestar preguntas que ayuden a hacer más claro el problema.
Sin poner nada de codigo solo te puedo recomendar tener una array de objetos con los datos que necesites y usar amp-mustache para poner cada entrada del objeto donde le corresponda
Como no pones ni código ni nada, pues tampoco te sé decir, pero te dejo esto aqui por si te vale de algo xD
https://www.tutorialrepublic.com/html-reference/html5-datalist-tag.php
Ejemplo: https://www.w3schools.com/code/tryit.asp?filename=GCQ98OAVVFZW
Os pongo el código pero no tiene ningún misterio, es un autocomplete normal de AMP con fuente remota:
<amp-autocomplete filter="none"
min-characters="3"
src="/remote/source"
query="searchString">
<input type="search" name="queryInput">
<template type="amp-mustache"
id="amp-template-custom">
<div class="location-item"
data-value="{{label}}">
<div>{{label}}</div>
</div>
</template>
</amp-autocomplete>
Algo así sería. He intentado a asignar label+value a "data-value" pero eso hace que en el input se muestre el objeto tal cual (porque lo considera el value). El value vendría en el mismo objeto que label así que puedo accederlo haciendo {{value}}.
#4 No lo he usado en la vida, pero al tirar de componentes ya hechos, tendrías que mirar en la documentación si tienen algun evento propio al que puedas acoplarte cuando el usuario seleccione una de las opciones de la lista.
La otra opcion, sería que pusieras en este trozo algun código para trackear tu el evento (por ejemplo el onclick):
<div class="location-item" data-value="{{label}}" onclick="console.log(1234)">
<div>{{label}}</div>
</div>
Así, cuando el usuario seleccione una opcion, en el input aparecerá el label, pero tu en el evento haces lo que quieras (como guardarlo en local o asociarlo a un input hidden
#4 mira a ver si el ejemplo de Harry Potter es lo que buscas: https://amp.dev/documentation/examples/components/amp-autocomplete/
En teoría muestra el nombre y el email pero solo envía el email
#6 Pero ese ejemplo mete en el input el campo email (y por eso solo envia el campo email).
Yo entiendo que el quiere que en el imput ponga, por ejemplo "Madrid", pero tambien recibir el ID de madrid ( 37, por decir algo xD )
#8 Yo lo que entiendo es que el tiene un campo input, una lista con por ejemplo esto: {id:1, nombre: madrid, id:2, nombre: barcelona} y quiere que, cuando el usuario elija MADRID, en el input aparezca MADRID pero, tambien, recibir el ID, que es lo que no puede hacer ahora.
En tu ejemplo, lo que aparece en la lista tiene varias cosas, pero la información que se rellena al elegir una de ellas, es solo el email, el resto de información del objeto no se envía.
Igual me explico fatal (o lo entiendo fatal), pero el ejemplo que indicas no creo que solucione el problema que tiene #1
#11 En principio intento no meterme en poner un <amp-script> si puedo evitarlo pero lo haré si es necesario. Se que estan limitados y no estoy seguro de poder hacer eso, ademas necesitaría también manejar la selección con teclas. El autocomplete tiene un evento "change" pero emite el label.
Lo que me sorprende es lo poco que se queja la gente de esto. En principio hay un issue abierto en github que pide que emitan el objeto entero en lugar del label y esta marcado como que lo van a añadir pero de momento nada....
#12 Como no he tocado AMP, no entiendo lo del amp-script, pero no creo que necesites meter un código adicional para eso (ni ese elemento), ya que iria todo en el propio evento "onclick" del div.
Cogiendo tu código:
<amp-autocomplete filter="none" min-characters="3" src="/remote/source" query="searchString">
<input type="search" name="queryInput">
<input type="hidden" name="queryInputID" id="queryInputID">
<template type="amp-mustache" id="amp-template-custom">
<div class="location-item" onclick="document.getElementById('queryInputID').value={{id}}">
<div>{{label}}</div>
</div>
</template>
</amp-autocomplete>
#13 con AMP no puedes usar javascript tradicional, lo ignora
#12 aqui te explica como usar amp-bind con una fuente remota https://amp.dev/documentation/guides-and-tutorials/develop/interactivity/remote-data/
<amp-autocomplete> no dispara change sino select
En la parte del tutorial donde pone "Variable shirt prices" tienes dos snippets similares a lo que creo que necesitaras usar, solo que en tu caso será
<amp-autocomplete on="select:AMP.setState({selectedCountry: event.value})">
[...]
<div [data-value]="locations[selectedCountry].id">