11

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.

Improve this question
4
  • By sooner do you mean you always want the elements displayed? 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. 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. Commented May 2, 2013 at 21:11
  • Duplicate of: stackoverflow.com/q/14381217/453605 Commented Jan 19, 2015 at 14:10

2 Answers 2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I added that failed try as a comment to your question. Changed my answer to something that might be of more use to others.
Nowadays, Chromium / Chrome has a dropdown, while Firefox does not. More info here: stackoverflow.com/q/57696562/1657502
-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;
}
Improve this answer

1 Comment

The question asked is not to place an image, but to open the data list on a single click. And a better image solution would be to hide chrome's image and place a span with negative margin-left behind the input to catch click events as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.