The datalist
element is good. It was a bit bumpy there for a while, but browser implementations have improved over time. Now it’s by far the simplest and most robust way to create an autocompleting combobox widget.
Hook up an input
element with a datalist
element using the list
and id
attributes and you’re done. You can even use a bit of Ajax to dynamically update the option
elements inside the datalist
in response to the user’s input. The browser takes care of all the interaction. If you try to roll your own combobox implementation, it’s almost certainly going to involve a lot of JavaScript and still probably won’t account for all use cases.
Safari on iOS—and therefore all browsers on iOS—didn’t support datalist
for quite a while. But once it finally shipped, it worked really nicely. The option
s showed up just like automplete suggestions above the keyboard.
But that broke a while back.
The suggestions still appeared, but if you tapped on one of them, nothing happened. The input
element didn’t get updated. You had to tap on a little downward arrow inside the input
in order to see the list of option
s.
That was really frustrating for anybody on iOS using The Session. By far the most common task on the site is searching for a tune, something that’s greatly (progressively) enhanced with a dynamically-updating datalist
.
I just updated to iOS 18 specifically to see if this bug has been fixed, and it has:
Fixed updating the input value when selecting an option
from a datalist
element.
Hallelujah!
But now there’s some additional behaviour that’s a little weird.
As well as showing the option
s in the autocomplete list above the keyboard, Safari on iOS—and therefore all browsers on iOS—also pops up the option
s as a list (as if you had tapped on that downward arrow). If the list is more than a few option
s long, it completely obscures the input
element you’re typing into!
I’m not sure if this is a bug or if it’s the intended behaviour. It feels like a bug, but I don’t know if I should file something.
For now, I’ve updated the datalist
elements on The Session to only ever hold three option
elements in order to minimise the problem. Seeing as the autosuggest list above the keyboard only ever shows a maximum of three suggestions anyway, this feels like a reasonable compromise.