2

I am trying to use the <datalist> as an autocomplete populated via ajax. This works fine on desktop browsers including Safari. (There are some older posts on stackoverflow which indicate that Safari does not support the datalist, but current versions do.)

iOS Safari does not display the options by default and will only display once the user clicks the down arrow icon on the right of the input.

It is unintuitive to the user that there are options to choose from in the datalist and it is awkward that clicking the down arrow has the negative effect of closing the keyboard.

Is there a way to trigger the display of the list while the user is typing?

painbot
  • 160
  • 9

1 Answers1

1

I ran across the same issue. To update a datalist in safari, you have to replace the datalist node completely. Safari otherwise does not seem to force a render update for the datalist. I wasn't able to trick Safari into updating it with a redraw.

From the solution provided Force DOM redraw/refresh on Chrome/Mac you can do this

document.getElementById('datalistID').replaceWith(document.getElementById('FirdatalistID').clone(true));

If you have events bound they will be lost. You have to attach your event listeners higher up in the node and then target the child. Such example is provided here Attach event to dynamic elements in javascript

However after this, Safari doesn't auto-open the data list. You have to manually expand the list. I haven't found a workaround for that.

jeremyd
  • 61
  • 3