HTML5 데이터 목록에 대한 SelectedIndex가 있습니까?

Question

당신은 어떤 select 요소의 현재 option을 선택할 수 있습니다 : 나는 DataList와 함께 같은

mySelect.options[mySelect.selectedIndex] 

할 수 있습니까? 이런 식으로 뭔가 :

<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

아니요, 데이터 목록 요소는 입력에 자동 완성 기능을 제공합니다. 이것은 데이터의 소스이며 사용자로부터 숨겨져 있으며 여러 입력이이 소스에 연결될 수 있습니다. 따라서 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>