datalist

by brigand

HTML

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="options" id="test" name="ice-cream-choice" />

<datalist id="options">
    <option class="test" value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

JavaScript

document.querySelector('#test').addEventListener('change', (event) => {
	document.querySelectorAll('option').forEach(function(o, i) {
  console.log(event.target)
    	if (i == event.target.selectedIndex) {
      	console.log(o)
      }
  })
})