Uso del elemento datalist para sugerencias de entrada predefinidas

El elemento <datalist> en HTML se utiliza para crear una lista predefinida de opciones para un elemento <input>. Permite al usuario seleccionar una opción de la lista, pero también le da la posibilidad de ingresar su propio valor si lo desea. La lista de valores predefinidos permanece oculta hasta que el usuario comienza a escribir en el campo de texto asociado. El <datalist> se asocia mediante un atributo id, y el <input> se vincula a este utilizando el atributo list.

En general, el elemento <datalist> puede ser una forma útil de proporcionar una lista predefinida de opciones para que los usuarios seleccionen, permitiendo al mismo tiempo la flexibilidad de ingresar su propio valor si es necesario.

Ejemplo

Cuando el usuario comienza a escribir en el campo de entrada category, el navegador mostrará las categorías predefinidas del datalist. Si ninguna de las opciones coincide con la entrada del usuario, aún puede escribir su propia categoría. Esto permite al usuario elegir de una lista y, si es necesario, ingresar manualmente un valor.

• <label for="category">: etiqueta el campo de entrada, indicando al usuario que debe seleccionar o ingresar una categoría de producto;
• <input type="text" name="category" id="category" list="categories"/>: el campo de entrada donde el usuario puede escribir una categoría o seleccionar entre las opciones disponibles. El atributo list="categories" vincula este campo de entrada con el datalist con el ID categories;
• <datalist id="categories">: contiene una lista de categorías de producto predefinidas. Estas opciones aparecerán como sugerencias cuando el usuario comience a escribir en el campo de entrada;
• <option value="...">: cada option representa una categoría de producto en la lista. El usuario puede seleccionar una de estas categorías o escribir su propio valor si no coincide con ninguna de las opciones.