Change 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. The user begins to write any parameter values ​​OR the down / up arrow, and the drop-down list offers options.
2. User mouseclicks or enterclicks according to one of the options, and it’s important: it can still scroll up / down the list.
3. The user goes beyond the input field. The input field is no longer in focus. 4. The user wants to change his choice and clicks on the input field, but the parameters are no longer visible.

How can I show the parameters in step 4?

Answer 1

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

Summary Create your own element similar to the element, copy the values ​​from the <datalist> into it. Then bind 2 events for input: show / hide focus / blur. And add an event to each element similar to the element to pass the value on click () for input. This will be the save item that will be displayed when there is no <datalist> drop-down list. There is one tricky thing - fading is done by setTimeout, because the focusout (blur) event is fired before the click event ...

A screenshot taken so far: http://jsfiddle.net/xPx2Z/3/ :) / * xrome look-a-like dropdown * /

BTW: you cannot open "true" <select> and still be focus() ed in the input, so the solution with the <select> element is not good. So I updated the answer a bit :)