4

I'm new to HTML5 datalists. I have setup an <input type="text"> tied to a <datalist> following:

For instance:

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Chrome / Chromium shows the input as a combobox, allowing one to list all the possible values:

Datalist on Chrome / Chromium

Firefox displays the input as any other text field, but I realized one can display all the options double clicking the field, or clicking the field and pressing the down arrow key:

Datalist on Firefox

I need to implement a browser-agnostic button that shows that list of options when it is clicked. Like:

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<button type="button">Show options</button>

Show options button

How can I implement such a button?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Antônio Medeiros
  • 3,068
  • 1
  • 27
  • 22
  • Wow, a thorough internet search has given me no answers. I've tried everything I know in javascript to simulate clicks or autofocus on the datalist... nothing works. My best advice is to simply use a `placeholder` attribute, or maybe a framework like Bootstrap to add a fancy label to your list that lets people know what's up. – TRose Aug 28 '19 at 16:43
  • That's why I asked on Stack Overflow :) – Antônio Medeiros Aug 28 '19 at 16:44
  • And StackOverflow is stumped too, looks like. https://stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript ... If simply using a placeholder or label is not a viable solution, you'll have to build your own custom selector using jQuery or something. – TRose Aug 28 '19 at 16:47
  • What I already tried: simulating pressing the down arrow key, but it did not work. More info here: https://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key/12522769#comment68243143_10455626 – Antônio Medeiros Aug 28 '19 at 16:47

0 Answers0