El siguiente código incluye un formulario con un datalist y un script para manejar el evento de envío del formulario, obteniendo el valor seleccionado y mostrándolo en el HTML.
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Input con Datalist</<span class="hljs-name">title>
</<span class="hljs-name">head>
<body><formid="myForm"><labelfor="category">Selecciona una categoría:</<span class="hljs-name">label>
<inputlist="category"id="category-input"name="category"placeholder="Elige o escribe una categoría"><datalistid="category"><optionvalue="Categoría_1"></<span class="hljs-name">option>
<optionvalue="Categoría_2"></<span class="hljs-name">option>
<optionvalue="Categoría_3"></<span class="hljs-name">option>
<optionvalue="Categoría_4"></<span class="hljs-name">option>
<optionvalue="Categoría_5"></<span class="hljs-name">option>
</<span class="hljs-name">datalist>
<buttontype="submit">Enviar</<span class="hljs-name">button>
</<span class="hljs-name">form>
<pid="output"></<span class="hljs-name">p>
<script>// Añade un listener al evento de submit del formulariodocument.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Previene el envío del formularioconst categoryValue = document.getElementById('category-input').value; // Obtiene el valor del inputdocument.getElementById('output').textContent = `El valor seleccionado es: ${categoryValue}`; // Muestra el valor en el párrafo
});
</<span class="hljs-name">script>
</<span class="hljs-name">body>
</<span class="hljs-name">html>
Estructura HTML Básica:
form que contiene un label, un input con datalist y un botón de envío.Formulario y Datalist:
input con list="category" está asociado al datalist con id="category", que contiene varias opciones predefinidas.
JavaScript:
submit).event.preventDefault() se usa para evitar que el formulario se envíe y recargue la página.input con document.getElementById('category-input').value.) con id="output".
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault(); // Previene el envío del formularioconst categoryValue = document.getElementById('category-input').value;
document.getElementById('output').textContent = `El valor seleccionado es: ${categoryValue}`;
});
input asociado al datalist.
input y lo muestra en el párrafo debajo del formulario.
