Most of this is great, except for the input/datalist bits, which are not sufficiently functional to be used in any real scenario. Users expect these interfaces to be tolerant of misspellings, optional sub text under each option, mobile ux niceties, etc -- and so everyone builds this with js...
And styling! The default styling of datalists in most browsers is just ugly.
On my android phone it just didn't show anything in the drop downs.
Try on a phone, it doesn’t work. Now that’s you create html only and no js you need to test all kind of devices to see quirks and try to fix it. And you’ll end up with more hacks to fix other devices and you end up adding Js. And you’ll have html only and html with js. With is much worse that just properly do it in js.
I can see the op is a js hater even tho he keep saying he’s not. Anyway doesn’t matter. Just a small note.
My main beef with datalist is that there's no easy way to show and allow only text (e.g. Beverly Hills), but have the actual value selected be a number (e.g. 90210). In other words there's no analogy to <option value="90210">Beverly Hills</option>.