Có một SelectedIndex cho một danh sách dữ liệu HTML5 không?

Question

Bạn có thể chọn dòng option của bất kỳ yếu tố select:

mySelect.options[mySelect.selectedIndex] 

Tôi có thể làm tương tự với một DataList? Một cái gì đó như thế này:

<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

Không, phần tử datalist là để cung cấp tự động hoàn thành các đầu vào. Nó là một nguồn dữ liệu, được ẩn khỏi người dùng và nhiều đầu vào có thể liên kết với nó. Do đó nó không có ý nghĩa để có một selectedIndex.

Thay vào đó, bạn chỉ cần kiểm tra .value của đầu vào:

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

Đánh giá bởi specs, datalist đối tượng không có selectedIndex tài sản. Nhưng bạn có thể tìm thấy tùy chọn mặc định, có selected. Hoặc so sánh giá trị của đầu vào với từng giá trị tùy chọn và tìm chỉ mục theo cách thủ công.

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

Bạn chỉ có thể thêm một giá trị cho các yếu tố đầu vào. Điều này sẽ được hiển thị cho người dùng dưới dạng giá trị "mặc định". Nếu người dùng quyết định thay đổi nó, tức là xóa giá trị này từ các lĩnh vực đầu vào, sau đó danh sách trong datalist sẽ hiển thị:

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