Tengo una pregunta de 2 partes relacionada con la etiqueta <datalist> . En primer lugar, si bien esto funciona en Chrome, ¿es válido lo siguiente?
<datalist id="key1_list"> <option value="myval1">Disp 1</option> <option value="myval2">Disp 2</option> <option value="myval3">Disp 3</option> </datalist> Y si es así, ¿cómo se obtiene el texto de visualización seleccionado de la etiqueta <option> ? En Chrome, el valor es el texto principal con el Disp 1 listado como pequeño debajo. ¿Alguien sabe una forma (en Jquery) de obtener el text() ya que no parece haber una bandera selected en la lista de la opción seleccionada?
Considere usar el evento de input . Ver ejemplo:
$(function() { $("#myKey_list").on("input", function(event) { var val = $(this).val(); console.log("Input: " + val); var opt = $("#key1_list option[value='" + val + "']"); console.log("Option: " + opt.text()); $(this).val(opt.text()); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="myKey_list">Choose from this list:</label> <input list="key1_list" id="myKey_list" name="myBrowser" /> <datalist id="key1_list"> <option value="myval1">Disp 1</option> <option value="myval2">Disp 2</option> <option value="myval3">Disp 3</option> </datalist>Como se mencionó en Realizar acción al hacer clic en la opción de lista de datos HTML5
Debido a la falta de eventos disponibles para los elementos
<datalist>, no hay forma de obtener una selección de las sugerencias que no sea ver los eventos de entrada (change,input, etc.).
Cuando identificamos una input , podemos cambiar el valor según la opción.