Skip to main content
1 de 5
Pollo
  • 2.5k
  • 9
  • 23

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>

Pollo
  • 2.5k
  • 9
  • 23