Skip to main content
redacción
Origen Enlace
Pollo
  • 2.5k
  • 9
  • 23

Ese es el comportamiento por diseño cuando tiene un value.
En vez de usar el id dentro del value, podrías poner el texto con el nombre del equipo y guardar el id en una propiedad data extra.

<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 seleccionado, 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 }" i]`);
            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>

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.

Ese es el comportamiento por diseño cuando tiene un value.
En vez de usar el id dentro del value, podrías el texto y guardar el id en una propiedad data extra.

<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 seleccionado, 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 }" i]`);
            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>

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.

Ese es el comportamiento por diseño cuando tiene un value.
En vez de usar el id dentro del value, podrías poner el texto con el nombre del equipo y guardar el id en una propiedad data extra.

<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 seleccionado, 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 }" i]`);
            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>

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.

Case insensitive
Origen Enlace
Pollo
  • 2.5k
  • 9
  • 23

Ese es el comportamiento por diseño cuando tiene un value.
Podrías poner los nombres únicamenteEn vez de usar el id dentro del value, podrías el texto como valor y guardar el id en una propiedad data extra.

<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 seleccionaroseleccionado, 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 }" i]`);
            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>

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.

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:

<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 }" i]`);
            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>

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.

Ese es el comportamiento por diseño cuando tiene un value.
En vez de usar el id dentro del value, podrías el texto y guardar el id en una propiedad data extra.

<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 seleccionado, 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 }" i]`);
            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>

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.

Case insensitive
Origen Enlace
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.

<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:

<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 }"]`" i]`);
            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>

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.

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:

<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>

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.

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:

<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 }" i]`);
            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>

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.

se añadieron 127 caracteres en el cuerpo
Origen Enlace
Pollo
  • 2.5k
  • 9
  • 23
Loading
Origen Enlace
Pollo
  • 2.5k
  • 9
  • 23
Loading