Selecting the first record from a datalist by default?

Question

I've seen this question asked in .asp threads but I'm not using .asp so the answers aren't very helpful. I'm using html but can use javascript if need be to accomplish this goal.

What I have is a standard html input with a datalist for the available options like so:

<input id="test_input" list="test" name="test" placeholder="Type your answer" value="" />
<datalist id="test">
<select>
<option>Apples</option>
<option>Oranges</option>
<option>Grapes</option>
</select>
</datalist>

The problem is that if someone types "g," or "ap," or anything at all, actually, and press the submit button, it does not select the default record. It will narrow the list down, but typing "Grapes" and pressing enter does not get the same result as actually clicking on "Grapes" in the select.

How do I force first record to be selected, even if the user only types a portion of that record?

Answer 1

I don't think this is the best method, since you can't "reset" when you wrote. So when i start to type apple, and i missing "l", i will type appk, then i say "oh god, i missed", i retry. I'll type apple again, but the typed value will be appkapple, if you don't make a setinterval to clear the already typed value after a time, but that does not makes sense.

Why you don't try an autocomplete, or a select field with options?