JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input onchange="onChange(event)" type="text" name="autocomplete" class="rounded" list="some-data" placeholder="choose a thing" />
  <datalist id="some-data">
    <option data-value="1" value="foo" />
    <option data-value="2" value="bar" />
    <option data-value="3" value="baz" />
  </datalist>
</div>

JavaScript

function onChange(e) {
    let value = e.target.value

    // Get the data-value attribute by selecting the datalist element
    // by the matching value ('foo', 'bar', 'baz' in our case)
    let selected = document.body.querySelector("datalist [value=\""+value+"\"]")

		if (selected) {
    	let id = selected.dataset.value
      console.log('selected value is:', id)
    }
   
}