Ese es el comportamiento por diseño cuando tiene un `value`. Podrías poner los nombres únicamente el texto como valor y guardar el id en una propiedad `data`. <datalist id="miLista"> <option data-id="2" value="River"> <!-- y el resto --> </datalist> Desde JavaScript no hay una forma muy directa de obtener el `data-id` seleccionaro, porque un datalist no está asociado a un input (y puede usarse en muchos inputs diferentes). Estos serían los pasos: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <label for="club" class="form-label">Clubes</label> <input type="text" class="form-control" name="nombre" id="club" list="miLista" autocomplete="on"> <datalist id="miLista"> <option data-id="1" value="Boca"> <option data-id="2" value="River"> <option data-id="3" value="Independiente"> <option data-id="4" value="Racing"> </datalist> <script> const club = document.getElementById('club'); //evento cuando cambia el input club.addEventListener('change', clubChange); function clubChange(evt) { const input = evt.target, idDatalist = input.getAttribute('list'); //obtener el datalist que le corresponde let datalist; if (idDatalist && (datalist = document.getElementById(idDatalist))) { //obtener la opcion seleccionada let opcionSel = datalist.querySelector(`option[value="${ input.value }"]`); if (opcionSel) { //obtener el data-id de esa opcion let idClub = opcionSel.dataset.id; //acá está el valor console.log('value =',input.value, '\tid =', idClub); } } } </script> <!-- end snippet --> Lo que hice fue: obtener el atributo ` list="miLista" ` y referenciar el elemento con ese id (el datalist). Luego, dentro de ese datalist, buscar el option cuyo `value` sea igual al valor que tiene el input. Al obtener el option, recién ahí se tiene el `data-id`.