javascript - bootstrap - Mostrar etiquetas de datos pero enviar el valor real

jquery datalist selected value

Question

Actualmente, el elemento HTML5 <datalist> es compatible con la mayoría de los principales navegadores (excepto Safari) y parece una forma interesante de agregar sugerencias a una entrada.

Sin embargo, parece haber algunas discrepancias entre la implementación del atributo de value y el texto interno en la <option> . Por ejemplo:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

Esto se maneja de manera diferente por diferentes navegadores:

Chrome y Opera:

Firefox e IE 11:

Después de seleccionar uno, la entrada se llena con el valor y no con el texto interno. Solo quiero que el usuario vea el texto ("La respuesta") en el menú desplegable y en la entrada, pero pase el valor 42 al enviar, como lo haría una select .

¿Cómo puedo hacer que todos los navegadores hagan que la lista desplegable muestre las etiquetas (texto interno) de las <option> s, pero envíe el atributo de value cuando se envíe el formulario?

Answer 1

Al hacer clic en el botón de búsqueda, puede encontrarlo sin bucle.
Simplemente agregue a la opción un atributo con el valor que necesita (como id ) y búsquelo específico.

$(''#search_wrapper button'').on(''click'', function(){
console.log($(''option[value="''+ 
$(''#autocomplete_input'').val() +''"]'').data(''value''));
})

Answer 2

La solución que uso es la siguiente:

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

Luego, acceda al valor que se enviará al servidor utilizando JavaScript de esta manera:

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value=''"+shownVal+"'']").dataset.value;

Espero eso ayude.

Answer 3

Tenga en cuenta que datalist no es lo mismo que select . Permite a los usuarios ingresar un valor personalizado que no está en la lista, y sería imposible obtener un valor alternativo para dicha entrada sin definirlo primero.

Las formas posibles de manejar la entrada del usuario son enviar el valor ingresado tal cual, enviar un valor en blanco o evitar el envío. Esta respuesta maneja solo las dos primeras opciones.

Si desea no permitir la entrada del usuario por completo, tal vez select sería una mejor opción.

Para mostrar solo el valor de texto de la option en el menú desplegable, usamos el texto interno y omitimos el atributo de value . El valor real que queremos enviar se almacena en un atributo de data-value personalizado:

Para enviar este data-value tenemos que usar un <input type="hidden"> . En este caso, omitimos el name="answer" en la entrada normal y lo movemos a la copia oculta.

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

De esta manera, cuando cambia el texto en la entrada original, podemos usar JavaScript para verificar si el texto también está presente en la lista de data-value y obtener su data-value . Ese valor se inserta en la entrada oculta y se envía.

document.querySelector(''input[list]'').addEventListener(''input'', function(e) {
    var input = e.target,
        list = input.getAttribute(''list''),
        options = document.querySelectorAll(''#'' + list + '' option''),
        hiddenInput = document.getElementById(input.getAttribute(''id'') + ''-hidden''),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute(''data-value'');
            break;
        }
    }
});

La identificación id y answer-hidden en la entrada regular y oculta son necesarias para que el script sepa qué entrada pertenece a qué versión oculta. De esta manera, es posible tener múltiples input en la misma página con una o más datalist brindan sugerencias.

Cualquier entrada del usuario se envía tal cual. Para enviar un valor vacío cuando la entrada del usuario no está presente en la lista de datos, cambie hiddenInput.value = label a hiddenInput.value = ""

Ejemplos de trabajo de jsFiddle: javascript simple y jQuery

Answer 4

Usando PHP, he encontrado una forma bastante simple de hacer esto. Chicos, solo usen algo como esto

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='''' AND lname!='''' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo ''<option data-value="''.$row_this[''customer_id''].''">''.$row_this[''fname''].'' ''.$row_this[''lname''].''</option>
                    <input type="hidden" name="customer_id_real" value="''.$row_this[''customer_id''].''" id="answerInput-hidden">'';
                }

                 ?>
            </datalist>

El Código anterior permite que el formulario lleve la identificación de la opción también seleccionada.