Chrome瀏覽器不會按標籤搜索數據列表

Question

我在我的網站中有以下輸入框，我想給出由給定標籤提供的建議，並在選擇時將值傳遞給SQL數據庫。

<input type="text" name="Search" size="45px" placeholder="&nbsp;Search student records." list="StudentList"> 
<datalist id="StudentList"> 
    <option value="145" label="Jake"> 
</datalist> 

我喜歡根據標籤顯示而不是Value的建議，就像在Firefox中一樣。

我該怎麼做？

Answer 1

var studentList = document.getElementById('StudentList'); 
var selectedLabel = studentList.options[studentList.selectedIndex].getAttribute('label'); 

編輯：

HTML：

<input type="text" name="Search" size="45px" placeholder="&nbsp;Search student records." list="StudentList"> 
<datalist id="StudentList"> 
    <option value="Jake" data-id="145"> 
</datalist> 

JS：

var search = document.getElementsByName('Search')[0]; 
var datalist = document.getElementById('StudentList')[0]; 
search.addEventListener('change', function(){ 
    var id; 
    for(var i = 0; i < datalist.options.length; i++){ 
     if(datalist.options[i].value === this.value) 
      id = datalist.options[i].getAttribute('data-id'); 
    } 
    // Use id here to search 
});