Programmatically make datalist of input[type=url] appear with JavaScript

Question

In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. http://jsfiddle.net/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.

Answer 1

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 combo-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/autocomplete/combobox. I'm surprised all this still seems unspecified and not natively supported. Please, spec-writers, give us the simple native combo-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

Answer 2

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;
}