HTML5 DataList için bir SelectedIndex var mı?

Question

herhangi select elemanın akım option seçebilirsiniz: Bir DataList ile aynı

mySelect.options[mySelect.selectedIndex] 

yapabilir mi? Böyle bir şey:

<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

Hayır, datalist öğe, girdilere otomatik tamamlama sağlamak içindir. Bu bir veri kaynağıdır, kullanıcıdan gizlenmiştir ve çoklu girişler buna bağlanabilir. Bu nedenle, selectedIndex olması mantıklı değildir.

Bunun yerine, girdi .value kontrol etmelisiniz:

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

specs bakılırsa datalist nesne selectedIndex özelliği yoktur. Ancak, selected olan varsayılan seçeneği bulabilirsiniz. Veya girişin değerini her bir seçenek değerine göre karşılaştırın ve dizini manuel olarak bulun.

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

Sadece giriş öğesine bir değer ekleyebilir. Bu kullanıcıya "varsayılan" değer olarak gösterilecektir. Kullanıcı, yani bunu değiştirmek giriş alanından Bu değeri silmek için karar verirse, o zaman datalist liste görünecektir:

<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>