Chrome 不会按标签搜索数据列表答案

【问题标题】：Chrome Won't Search data list by LabelChrome 不会按标签搜索数据列表
【发布时间】：2013-02-19 11:47:23
【问题描述】：

I have the following input box in my site, which I want to give suggestions by the Given Label, and when selected the Value is passed to the database for 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 中一样。

我该怎么做？

【问题讨论】：

标签： php javascript search input

【解决方案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
});

【讨论】：

非常感谢您抽出宝贵时间回复但我不确定如何使用您的回答。尽管我的脑海中闪过一丝火花，但我不确定如何激活或调用上述 Javascript。有什么建议吗？
@user2128576 等等，我会考虑的（我第一次误解了你的问题）
@user2128576 已编辑答案，希望对您有所帮助
非常感谢先生，尽管我需要改变一些东西，但它做得很好:) 我花了很长时间才将其标记为答案的原因是我正在对其进行修改。
哦，我不应该称您为“先生”，因为我不知道您是男是女 :) 无论如何感谢您的快速回复。