0

I am attempting to get the id of the selected option in a non-unique datalist without using jQuery.

Here is an image of the list I am currently working with

HTML

<datalist id="contacts">
    <option id="options" *ngFor="let contact of contacts" value="{{contact.name}}" data-id="{{contact.id}}">
        {{getRoles(contact.roles)}}</option>
</datalist>

    <input autocomplete="off" type="search" class="form-control" id="search-contact" list="contacts" name="contact" (keyup)="inquiryChanged($event)" [(ngModel)]="inquiry" [ngModelOptions]="{standalone: true}">
    <input type="hidden" name="contact" id="search-contact-hidden">

JS

document.querySelector('#search-contact').addEventListener('input', e => {
      var input = e.target as HTMLInputElement,
        list = input.attributes['list'].nodeValue,
        options = document.querySelectorAll('#' + list + ' option[value="' + input.value + '"]'),
        hiddenInput = document.getElementById(input.attributes['id'].nodeValue + '-hidden');

      if (options.length > 0) {
        hiddenInput['value'] = input.value;
        hiddenInput['innerText'] = **options[0]**['id'];
      }
      console.log("hiddenInput['value']")
      console.log(hiddenInput['value'])
      console.log("input.value")
      console.log(input.value)
});

Where it shows "options[0]", it gives me the first option in the list, but how can I get the second option?

Relevant answer that I found, but did not work

0 Answers0