jquery - ejemplo - Cómo mostrar el texto en el datalist html5 y no en el valor
html5 datalist option selected (2)
Editar, actualizado
Siguiente regente
Probar (v3)
html
<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
<option data-value="InternetExplorer" value="1"></option>
<option data-value="Firefox" value="2"></option>
<option data-value="Chrome" value="3"></option>
<option data-value="Opera" value="4"></option>
<option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">
js
$(document).ready(function() {
var data = {};
$("#browsers option").each(function(i,el) {
data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());
$(''#submit'').click(function()
{
var value = $(''#selected'').val();
alert($(''#browsers [value="'' + value + ''"]'').data(''value''));
});
});
<!DOCTYPE html>
<html>
<body>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">1</option>
<option value="Firefox">2</option>
<option value="Chrome">3</option>
<option value="Opera">4</option>
<option value="Safari">5</option>
</datalist>
<input type="submit">
</form>
</body>
</html>
http://jsfiddle.net/j7ehtqjd/1/
He adjuntado un violín. Por favor, compruebe. La solución que quiero lograr es cuando hago clic en el menú desplegable, se muestra el valor, pero quiero que se muestre el texto 1,2,3,4,5. Tengo que usar una respuesta json para mi problema real. Solo se debe mostrar el texto y el valor se debe ocultar como un menú desplegable general. Esta función de autocompletar es necesaria, de lo contrario, habría seguido el menú desplegable normal.
Un método bastante complicado para hacer esto sin dependencias como jQuery ( edición: Me doy cuenta de que jQuery está siendo utilizado por el OP, pero este método se integrará bien con o sin jQuery, por lo que podría ayudar a otros que no lo están ).
Primero, intercambie su valor y los nodos de texto, así:
<input list="browsers" name="browser" id="my_input">
<datalist id="browsers">
<option value="Internet Explorer">1</option>
<option value="Firefox">2</option>
<option value="Chrome">3</option>
<option value="Opera">4</option>
<option value="Safari">5</option>
</datalist>
<input type="submit">
Esto asegura que la entrada siempre muestre el valor correcto para el usuario. Luego agregue algo de JavaScript para verificar el nodo de texto del valor correspondiente, así:
let $input = document.getElementById(''my_input'');
let $datalist = document.getElementById(''browsers'');
$input.addEventListener(''change'', () => {
let _value = null;
let input_value = $input.value;
let options = $datalist.children;
let i = options.length;
while(i--) {
let option = options[i];
if(option.value == input_value) {
_value = option.textContent;
break;
}
}
if(_value == null) {
console.warn(''Value does not exist'');
return false;
}
console.log(''The value is:'', _value );
});
También puede cambiar el detector de eventos ''change'' a ''keyup'' para obtener comentarios en tiempo real. Y en lugar de console.log(''The value is:'', _value ) , simplemente puede agregar una entrada hidden adicional para almacenar el valor, lo que le permite enviar el valor y la identificación.
Esto utiliza la notación moderna de JavaScript, pero para que sea compatible con versiones anteriores solo tiene que cambiar el ''change'', () => { llamada a ''change'', function() { y cambio, let que var .