domsson
commented
6 months ago Would you look at that! There is now a datalist element that almost does what we want, and is more or less a drop-in replacement for select. There is one major problem with it, though: it works off of the option's value attributes, not the actual visible inner HTML strings. So it would show and submit the item names instead of their IDs. Which isn't an option as items like "Driver's License" with space and apostrophe will mess things up in the back end. Its also not clean.
However, here is an idea:
Use JavaScript to hide the existing select. Then Create a datalist, which is basically a copy, where the option's value will be the innerHTML from the original option, respectively. Then use more JavaScript to select the corresponding option in the original select, by comparing strings, yadda yadda, you get the idea. Should be easy enough, really, and I think its actually a nicer solution than all the fancy stuff I see out there, like building and styling completely custom dropdowns with nested divs, like Semantic UI does.
Currently, adding new items requires going through a humongous drop-down list, which is tedious on desktop, and borderline impossible on mobile. Implement some kind of search functionality to make this more convenient.