Есть ли SelectedIndex для HTMLL DataList?

Question

Вы можете выбрать текущий option любого select элемента:

mySelect.options[mySelect.selectedIndex] 

Могу ли я сделать то же самое с DataList? Что-то вроде этого:

<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

Нет, элемент datalist предназначен для обеспечения автозаполнения входных данных. Он является источником данных, скрыт от пользователя, и к нему могут подключаться несколько входов. Поэтому не имеет смысла иметь selectedIndex.

Вместо этого, вы должны просто проверить .value на входе:

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, datalist объект не имеет selectedIndex свойство. Но вы можете найти его вариант по умолчанию, который имеет selected. Или сравните значение ввода с каждым значением параметра и вручную найдите индекс.

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

Вы можете просто добавить значение входного элемента. Это будет показано пользователю как значение по умолчанию. Если пользователь решает изменить его, т.е. удалить это значение из поля ввода, то список в DataList будет отображаться:

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