Is there a SelectedIndex for an HTML5 DataList?

Question

You can pick the current option of any select element:

mySelect.options[mySelect.selectedIndex]

Can I do the same with a DataList? Something like this:

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

Shaduf

Answer 1

No, the datalist element is for providing autocomplete to inputs. It is a source of data, is hidden from the user, and multiple inputs may link to it. Therefore it doesn't make sense to have a selectedIndex.

Instead, you should simply check the .value of the input:

var datalist = document.getElementById ("datalist");
var input = document.getElementById ("input");

input.addEventListener ("keyup", function (event) {
    if (event.which === 13) {
        alert(input.value);
    }
}, false);

Gitt

Beware: when user clicks on dropdown item from datalist (mouseclick), no event is fired (chrome21) – Santana

Should probably change the event listener to input since that'd work with the problem Dmitry posed too. – Aeri

Answer 2

Judging by specs, datalist object doesn't have selectedIndex property. But you can find it's default option, which have selected. Or compare input's value to each option value and manually find the index.

Textbook

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

Alarmist

Answer 4

Lets say you have data attributes in the above example like this,

<input list="browsers" name="browser" value="Internet Explorer">
<datalist id="browsers">
    <option value="Internet Explorer" data-company="Microsoft">
    <option value="Firefox" data-company="Mozilla">
    <option value="Chrome" data-company="Google/Alphabet">
    <option value="Opera" data-company="Opera">
    <option value="Safari" data-company="Apple">
</datalist>

and you want to obtain the data-company attribute of the selected item,

using the loop above

for (var i=0;i<datalist_id.options.length;i++) {
    if (datalist_id.options[i].value == input_id.value) {
        // obtains the data-company attrbute
        console.log(datalist_id.options[i].getAttribute("data-company");
        alert(datalist_id.options[i].innerText);
        break;
    }
}

Saccharometer

Answer 5

You can just add a value to the input element. This will be shown to the user as the "default" value. If the user decides to change it, i.e. delete this value from the input field, then the list in the datalist will show up:

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

Tourniquet

Answer 6

Here is the script for getting index from SelectedIndex of Datalist. Html from @pingle60

let x = document.getElementById("browsers").options;
let input = document.querySelector('input');
input.onchange = getIndex;

function getIndex(e) {
    for (var i=0;i<x.length;i++) {
        if (x[i].value == e.target.value) {
            return i;
            // alert('The index of SellectedIndex is : ' + i + ' and the value is : '  +x[i].value);
            break;
        }
    }   
}

Poree