CODEWITHSUNDEEP
javascripthtmlhtml-datalist
Caio
Caio

Reputation: 3215

Is there a SelectedIndex for an HTML5 DataList?

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>

Upvotes: 11

Views: 25632

Answers (6)

Alif
Alif

Reputation: 1

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

Upvotes: 0

pingle60
pingle60

Reputation: 776

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

Upvotes: 1

riopiedra
riopiedra

Reputation: 148

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>

Upvotes: 0

muhyta
muhyta

Reputation: 21

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

Upvotes: 1

David Tang
David Tang

Reputation: 93674

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

Upvotes: 10

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12146

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.

Upvotes: 2

Related Questions