In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. /

I'm trying to make the datalist appear sooner. Ideally I would put a little "dropdown arrow" next to the input that when clicked would make the Datalist appear.

I'm looking for a webkit solution.

In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. http://jsfiddle/r7Y4v/

I'm trying to make the datalist appear sooner. Ideally I would put a little "dropdown arrow" next to the input that when clicked would make the Datalist appear.

I'm looking for a webkit solution.

• javascript
• html
• google-chrome
• input
• html-datalist

Share Improve this question Follow edited Apr 21, 2015 at 21:25 Stephan Muller 27.6k1818 gold badges8686 silver badges127127 bronze badges asked Apr 21, 2013 at 16:51 brilloutbrillout 7,4841515 gold badges7979 silver badges9595 bronze badges 4

• By sooner do you mean you always want the elements displayed? – m.edmondson Commented Apr 21, 2013 at 16:54
• Simply relaying the (double)click event (like: <button onclick="document.getElementById('input_id').onclick()">▼</button>) didn't work either. – GitaarLAB Commented Apr 21, 2013 at 18:22
• the object model of datalist is different in safari, just to inform you. while not super implemented in older safari (5.0.6) accessing with javascript works as expected, but the working version of datalist in chrome has strange behavior while trying to access some object items of it. where do i know this from? because i'm working on safe methods to get data out of it which works in all major browsers. – Ol Sen Commented May 2, 2013 at 21:11
• Duplicate of: stackoverflow./q/14381217/453605 – Marcello Nuccio Commented Jan 19, 2015 at 14:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I can't find anything in the specification how to do this.

Also I noticed that the implementation in current browsers seem to vary quite a bit (click vs dbl-click, arrow-key's, full versus filtered list and how filters match the partial input, etc).

To me, it seems that for now there is still no properly working bo-box and the data-list seems to be in it's infancy.

So it appears you'd currently be better of to roll your own or use a ready library.
It seems to me the 'minimul datalist' library is rather popular (good link to read to).
On that page is a link to it's GitHub code and a demo page.

Side-note: I'd love that some-one gives a better answer! Also, at first I thought it was a good idea to leave out the arrow-button so people could have better styling-options for a drop-down button if they wanted one that they could hook-up to the datalist/autoplete/bobox. I'm surprised all this still seems unspecified and not natively supported. Please, spec-writers, give us the simple native bo-box (that is overdue for so long) and then add spice like filters!

---

Edit: There is an open Feature request since August 2012 on the Chromium project that asks for a drop-down functionality:

• Issue 152375: Add drop down toggle on input tag with datalist

How about something like this? Since Chrome does place an icon on hover I placed this image so that it would be in the same spot.

input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}