Changing the input value in HTML5 datalist

Question

<input type="text" list="numbers">

<datalist id="numbers">
    <option value="110">
    <option value="111">
    <option value="112">
    <option value="113">
    <option value="114">
    <option value="115">
</datalist>

http://jsfiddle.net/shvPB/

Scenario:
1. User starts to write any of the value options OR arrow down/up, and the dropdown list suggest the options.
2. User mouseclicks or enterclicks on one of the options, and important: she can still scroll up/down the list.
3. User clicks outside the input field. The input field is not in focus anymore.
4. User wants to change her choice and clicks on the input field but the options are not visible anymore.

How can I show the options at step 4 as well?

Answer 1

This is a particular solution but should work for your needs... (using jQuery)...:

Summary: Make your own select-like element, copy values from <datalist> to it. Then bind 2 events to input: show/hide on focus/blur. And add event to every option-like element to pass a value on click() to input. It will be a saving element that will be visible when there will be no <datalist>'s dropdown. There is one tricky thing - disappearing is done by setTimeout, because focusout(blur) event is fired sooner than click event...

Fiddle created so far: http://jsfiddle.net/xPx2Z/3/ :) /*chrome look-a-like dropdown */

BTW: you cant have "true" <select> opened and still be focus()ed on input, so solution with a <select> element is no good. So I updated the answer a bit :)