Building Better Country Selects (opens in new tab)

> A full country list inside a native `<select>` has several structural limitations:

> No filtering. Users cannot narrow the list by typing

But you can use an `<input type="text">` instead and add a `<datalist>`[0] to it with the list of countries and you will be able to filter them by typing. Granted, it still has no full support (namely, firefox), but still that's much better than a `<select>` with no filtering ability whatsoever.

Not sure why this is not more known, though, I've seen it just like a couple of times in the wild. Now, back to job searching...

[0] https://developer.mozilla.org/es/docs/Web/HTML/Reference/Ele...

I like the flags and extra search metadata however it does look quite big. My intial reaction was to scroll, not to press a button to find a country. Still better than the current one though. I'd love to see also a better country phone number selection which in a lot of cases does not even work as it should

I feel like the best solution is a custom dropdown, instead of a modal, modals rreally take you out of context, when you're editing a form, its a bit jarring to be thrown to a modal, the best country select in my opinion is what you've listed, but also it's in a dropdown.

better yet https://zipcodefirst.com

yeah the standard country dropdown is basically a scrollathon from hell and nobody wants to play "find the united kingdom" when they're just trying to buy some socks real quick

I like the idea of smarter filtering. But I wonder how a modal interacts with automatic form filling.

I don't care for the chaotically ordered list of countries after the suggested country.

I think a better version would be nonmodal, but with a modal button to expose more powerful browsing.

I also question why we have to fill out so many forms in the first place. We should have better ways by now to get frequently used bundles of info to counterparties.

This completely ignores those of us who fill forms by tabbing through fields to stay on our keyboard.

TAB into the country field, type 'Uni', down-arrow a couple times to United States. TAB to the next field. Simple.

Having the suggested country at the top for mouse-bound folks helps, but a standard select dropdown can also pre-select a default choice (via the 'selected' attribute).

Yes this is a pain in the ass for many many Koreans.

Your eyes have to scan for:

- South Korea - Korea, South - Republic of Korea - Korea, Republic of

And then you have - North Korea - Korea, North - Democratic People's Republic of Korea - Korea, Democratic People's Republic of

interesting idea. Although some countries change their names (sometimes in a complete way) depending on their native language. Should it be accounted for it as well, in case I need to search it via text? like, if the page is in english, it should be to match Germany for "Germany" and also "Deutschland" just in case, right?

tl;dr use an autocomplete dropdown