javascript - bootstrap - Mostrar etiquetas de datos pero enviar el valor real
jquery datalist selected value (4)
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?
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''));
})
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.
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
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.