Se você não está fazendo o tratamento do formulário com javascript
o que será enviado no valor de seu campo <input>
será o valor da opção (isso é padrão) como demonstrado no código abaixo (simples demonstração):
let input = document.getElementById('x')
input.addEventListener('input', function(evt) {
if ( input.value !== '' ) {
alert(this.value)
}
}, false)
<datalist id="teachers">
<select>
<option data-value="1" value="Nome 1">Nome 1</option>
<option data-value="2" value="Nome 2">Nome 2</option>
</select>
</datalist>
<input id="x" type="text" list="teachers">
Se você fizer um tratamento usando javascript
podes pegar o valor do <input>
e buscar com querySelector()
um elemento <option>
que tenha no atributo value=""
um valor igual e extrair/recuperar o conteúdo de seu atributo data-value
e reatribuir este valor (vindo do option
) ao <input>
, exemplo:
let input = document.getElementById('x')
input.addEventListener('input', function(evt) {
let selector = document.querySelector('option[value="'+this.value+'"]')
if ( selector ) {
input.setAttribute('value', selector.getAttribute('data-value'))
console.log(input)
}
}, false)
<datalist id="teachers">
<select>
<option data-value="1" value="Nome 1">Nome 1</option>
<option data-value="2" value="Nome 2">Nome 2</option>
</select>
</datalist>
<input id="x" type="text" list="teachers">
PS: os valores passados por um formulário (x-www-form-urlencoded) são {String}
normalmente funções de comparação (usadas no servidor) já lêem a {String}
como se representassem números exemplo:
"10" > 5 // verdadeiro
"10" > 15 // falso
Contudo, se você deseja salvar no banco de dados um valor "numérico" o ideal seria converter esta {String}
numérica para um número de fato:
// em PHP
$string_number = "10";
$number = (int) $string_number;
// test
echo(gettype($string_number).' - '.gettype($number));
// output: string - integer
// em JavaScript (Node)
let stringNumber = "10",
number = Number(stringNumber)
// test
console.log(typeof stringNumber +' - '+ typeof number)
// output: string - number
edição:
Ok, o segundo exemplo modifica o valor do "nó" noDOM
mas não o valor do <input>
que esta em memória ... uma abordagem não muito diferente deste exemplo (o segundo) usa um observador de evento submit
para o formulário.
Observando o evento submit
é possível substituir o valor do <input>
sem que haja uma mudança perceptível ao usuário (uma vez que o valor "visível" será mudado do nome para um "número").
let input = document.getElementById('x')
input.addEventListener('input', function(evt) {
let selector = document.querySelector('option[value="'+this.value+'"]')
if ( selector ) {
this.form.addEventListener('submit', function(evt) {
input.value = selector.getAttribute('data-value')
}, false)
}
}, false)
<datalist id="teachers">
<select>
<option data-value="1" value="Nome 1">Nome 1</option>
<option data-value="2" value="Nome 2">Nome 2</option>
</select>
</datalist>
<form method="post" action="/?">
<input id="x" name="teacher" type="text" list="teachers">
<input type="submit" value="Send">
</form>
A recomendação (caso queira salvar um número no banco de dados) continua a mesma.
Testado em:
- Node: versão 8.9.4
- PHP: versão 7.0