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?