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