HTML5 datalist see a value have other

Question

I need a way to text something e recive otherthing, make me explain... This code don't work because if I text Ba he don't tip me back Banana, but I need the code of Banana.

<form method="POST" action="connect.php">
<input list="nd" name="nd"  />
<datalist id="nd">
    <option value="1">Banana</option>
    <option value="2">Apple</option>
    <option value="3">Pasta</option>
    <option value="4">Pizza</option>
</datalist>
<input type="submit" name="submit" />

I need to text "Ba" and have the autocomplete advice of "Banana", but once have found it I need 1 in the form.

Ty all and sorry for my terrible english :)

Answer 1

The values need to implement the word; not a number

<datalist id="nd">
    <option value="Banana"></option>
    <option value="Apple">Apple</option>
    <option value="Pasta">Pasta</option>
    <option value="Pizza">Pizza</option>
</datalist>

This will allow the autocomplete of the input text.

If you need to return a number; I would suggest either code behind or javascript to map the word value to a number and populate a hidden field or allow the php to handle the mapping (decoupling). Hope this helps.