7
<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?

Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
  • I don't think you can programmatically activate the datalist. See http://stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript – Justin Bicknell Aug 27 '13 at 20:44
  • You can't the same way you can't force a select tag to open up. – j08691 Aug 27 '13 at 20:50
  • @j08691 please dont confuse people with your guesses open select with JS actually CAN be done and was solved here : http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery ...this also shows approach that may (or may not) work for datalist too (aproach, not a solution for datalist...) – jave.web Aug 28 '13 at 09:28
  • 1
    @jave.web - you should do a little research before opening your mouth. The example you pointed out fails in most browsers. – j08691 Aug 28 '13 at 12:29
  • It doesnt fail in Chrome(above 50% in browser usage) nobody said that solution is crossbrowser... But a statement that you cant force a select tag to open up is false. You can, but not everywhere... – jave.web Aug 28 '13 at 13:44

1 Answers1

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 :)

jave.web
  • 13,880
  • 12
  • 91
  • 125
  • @greg answer replace in comment, "is an autocomplete function, it will only show items on your list that match what the current value is. if user entered 11, all of your options match and will all be displayed. if user entered 110, only 110 matches and only 110 will be displayed. user needs to clear input to view full list again. a js function that sets value to "" onclick will also work." – Ajay2707 Mar 17 '16 at 04:51