Tenga en cuenta que la datalist de datos no es lo mismo que una 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 prohibir la entrada del usuario por completo, tal vez select sea 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 data-value personalizado:

Para enviar este data-value debemos 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 el texto en la entrada original cambia, podemos usar javascript para verificar si el texto también está presente en la datalist de datos 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 answer de identificación y answer-hidden en la entrada normal y oculta son necesarias para que el script sepa qué entrada pertenece a qué versión oculta. De esta manera, es posible tener varias input en la misma página con una o más datalist de datos que 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 = inputValue a hiddenInput.value = ""

Ejemplos de jsFiddle de trabajo: javascript simple y jQuery

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 usando JavaScript de esta manera:

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

Espero eso ayude.

Me doy cuenta de que esto puede ser un poco tarde, pero me topé con esto y me preguntaba cómo manejar situaciones con múltiples valores idénticos, pero claves diferentes (según el comentario de bigbearzhu).

Así que modifiqué ligeramente la respuesta de Stephan Muller:

Una lista de datos con valores no únicos:

 <input list="answers" name="answer" id="answerInput"> <datalist id="answers"> <option value="42">The answer</option> <option value="43">The answer</option> <option value="44">Another Answer</option> </datalist> <input type="hidden" name="answer" id="answerInput-hidden">

Cuando el usuario selecciona una opción, el navegador reemplaza input.value con el value de la opción datalist en lugar del innerText .

Luego, el siguiente código busca una option con ese value , la inserta en el campo oculto y reemplaza el valor de input.value con el innerText .

 document.querySelector('#answerInput').addEventListener('input', function(e) { var input = e.target, list = input.getAttribute('list'), options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'), hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'); if (options.length > 0) { hiddenInput.value = input.value; input.value = options[0].innerText; } });

Como consecuencia, el usuario ve lo que dice el texto interno de la opción, pero la identificación option.value innerText disponible al enviar el formulario. Demostración jsFiddle