Elemento Datalist

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 una lista de opciones predefinidas, al tiempo que le ofrece la posibilidad de introducir su propio valor si así lo desea. La lista de valores predefinidos se oculta hasta el momento en que el usuario empieza a escribir en el campo de texto asociado. Combinamos <datalist> con el atributo id y <input> con 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, al tiempo que les permite la flexibilidad de introducir su propio valor si es necesario.

Example

When the user starts typing in the category input field, the browser will display the predefined categories from the datalist. If none of the options match the user's input, they can still type their own category. This allows the user to choose from a list and manually input a value if necessary.

• <label for="category">: labels the input field, indicating to the user that they should select or enter a product category;
• <input type="text" name="category" id="category" list="categories" />: the input field where the user can either type a category or select from the available options. The list="categories" attribute links this input to the datalist with the ID categories;
• <datalist id="categories">: this contains a list of predefined product categories. These options will appear as suggestions when the user starts typing in the input field;
• <option value="...">: each option represents a product category in the list. The user can select one of these categories or type their own value if it doesn’t match any of the options.