If you are not doing the form handling with javascript what will be sent in the value of your <input> field will be the option value (this is default) as demonstrated in the code below (simple demo):
p>
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">
If you make a treatment using
javascript you can get the value of
<input> and search with
querySelector() a
<option> element that has in the attribute
value="" an equal value and extract / retrieve the content of its attribute
data-value and reassign this value (from
option ) to
<input> , eg:
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: Values passed by a form (x-www-form-urlencoded) are {String} normally comparison functions (used on the server) already read {String} as if they represented example numbers:
"10" > 5 // verdadeiro
"10" > 15 // falso
However, if you want to save a "numeric" value in the database, it would ideally be to convert this {String} numeric to a fact number:
// 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
editing:
Okay, the second example modifies the value of the "node" in DOM but not the value of <input> that is in memory ... an approach not very different from this example (the second) uses an event observer submit for the form.
By observing the event submit it is possible to replace the value of <input> without a noticeable change to the user (since the value "visible" will be renamed to a "number").
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>
The recommendation (if you want to save a number in the database) remains the same.
Tested on:
-
Node : version 8.9.4
-
PHP : version 7.0
