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

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
});