Formularios
Campo con una lista larga y conocida de valores válidos (país, provincia, TLD de un dominio…). A diferencia del buscador, seleccionar un resultado rellena el propio campo en vez de navegar a otro sitio.
<vadavo-autocomplete> recibe sus valores válidos como hijos option — se leen una sola vez como datos, no se muestran directamente. El propio elemento genera el campo y el panel de resultados, filtra las opciones al escribir y resalta la coincidencia. Un clic, o ↑/↓ más Intro, selecciona un resultado y lo escribe en el campo.
El atributo open muestra el panel sin que el campo tenga el foco, para ofrecer las opciones desde el primer momento.
<vadavo-autocomplete placeholder="País" value="Esp" open>
<option>España</option>
<option>Esprilla (Islas Feroe)</option>
<option>Estonia</option>
</vadavo-autocomplete>Cuando el valor coincide con una opción, el campo muestra una marca de verificación en vez del botón de limpiar.
<vadavo-autocomplete value="España">
<option>España</option>
<option>Esprilla (Islas Feroe)</option>
<option>Estonia</option>
</vadavo-autocomplete>| Token | Qué es |
|---|---|
--autocomplete--background--clear | El color de fondo del botón de limpiar. |
--autocomplete--background--match | El color de fondo de una coincidencia: el fragmento resaltado en una fila, y el disco que confirma que el valor es una de las opciones. |
--autocomplete--color--match | El color del texto o de la marca sobre una coincidencia. |
--autocomplete--radius--match | El radio de borde del fragmento resaltado que coincide con lo escrito. |