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
.
Desde JavaScript no hay una forma directa de obtener ese id, porque un datalist no está asociado a un input (y puede usarse en muchos inputs diferentes). Estos serían los pasos:
<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>