¿Hay un SelectedIndex para una lista de datos HTML5?

Question

Usted puede recoger la corriente option de cualquier elemento select:

mySelect.options[mySelect.selectedIndex] 

¿Puedo hacer lo mismo con un DataList? Algo como esto:

<input id = "input" list = "datalist" type = "text" /> 

<datalist id = "datalist"> 
    <option value = "No. 1"></option> 
    <option value = "No. 2"></option> 
    <option value = "No. 3"></option> 
</datalist> 

<script> 
    var datalist = document.getElementById ("datalist"); 
    var input = document.getElementById ("input"); 

    input.addEventListener ("keyup", function (event) { 
     if (event.which === 13) { 
      alert (datalist.options[datalist.selectedIndex]); // Example 
     } 
    }, false); 
</script> 

Answer 1

No, el elemento datalist es para proporcionar autocompletar a las entradas. Es una fuente de datos, está oculta para el usuario y múltiples entradas pueden vincularse a ella. Por lo tanto, no tiene sentido tener un selectedIndex.

En su lugar, simplemente debe comprobar la .value de la entrada:

var datalist = document.getElementById ("datalist"); 
var input = document.getElementById ("input"); 

input.addEventListener ("keyup", function (event) { 
    if (event.which === 13) { 
     alert(input.value); 
    } 
}, false); 

Answer 2

A juzgar por specs, datalist objeto no tiene selectedIndex propiedad. Pero puede encontrar su opción predeterminada, que tiene selected. O compare el valor de la entrada con cada valor de opción y encuentre manualmente el índice.

Answer 3

for (var i=0;i<datalist_id.options.length;i++) 
    if (datalist_id.options[i].value == input_id.value) 
     {alert(datalist_id.options[i].innerText);break;} 

Answer 4

Usted puede añadir un valor al elemento de entrada. Esto se mostrará al usuario como el valor "predeterminado". Si el usuario decide cambiar, es decir, eliminar este valor del campo de entrada, a continuación, la lista de la lista de datos se mostrará:

<input list="browsers" name="browser" value="Internet Explorer"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist>