26

I am adding a single selection drop-down containing a list of all countries (around 200+ items).

In Windows it works fine as it displays 10-15 countries at a time and the scroll bar shows up. On the Mac, the drop-down shows all the items at once. The users have to scroll down through all items to look for their desired item.

I am not using a text-field as it may require spell check.

What are alternatives to a large drop-down select list that will work similarly across computers?

  • 2
    You present the situation, but you haven't made any question. Is your question why is different on those devices? is your question if that is accessible? or usable? or easy to understand? There are many options, please clarify that. – PatomaS Feb 14 '14 at 11:27
  • What is your question, specifically? Also I can't tell what you are getting at by the "this is no the users..." sentence. – Alnitak Feb 14 '14 at 11:28
  • wanted ask for alternatives – silenthokage Feb 14 '14 at 12:02
4

I would say that drop-downs does annoy user and you should simply use a text input and tell the users that they can type in required fields.
BUT, if there no alternative for a dropdown menu, there's very little that we can do. this is what only Safari users face and are already use to it, and therefore the behaviour they expect from the UI.

By the way, you can use scripts that will help the users to navigate with hot-keys like: click on A will take you first country name start with ‘a’, and so on.

  • 2
    you don't need to 'script hot keys' as the drop down does that by default via the browser itself. (tab into the field, start typing, and it will jump to the first item with the letter you typed.) – DA01 Mar 18 '14 at 15:38
  • Just to add, it is called as Predictive Search. – Abhishek Sharma Oct 29 at 6:26
20

I recommend implementing some kind of searching functionality. Dropdown-search hybrid elements are quite popular and a good way to solve this.

Select2 is a commonly used javascript library for building such hybrid dropdowns.

  • I was going to suggest a search feature with custom search suggestions, like this one: developer.android.com/guide/topics/search/… but I actually like the Select2 suggestion better. Thank you for including the JS library link! – PixelGraph Mar 18 '14 at 16:33
  • 3
    This is the correct answer for design at this time - regardless of any one library or solution – New Alexandria Mar 18 '14 at 16:33
6

http://harvesthq.github.io/chosen/

Chosen is a very sleek solution for large amounts of data in dropdowns. If you only are concerned for Country dropdowns, relax, users are used to select the country from a list, they use the keyboard to jump quickly to the desired country.

  • Unfortunately, chosen hasn't seen a commit since Jun 29th 2019. Doesn't appear to be supported anymore – Kolob Canyon May 1 at 20:00
3

but why you are use dropdown instead you use text box and perform like search box whenever user type their country show the country name match the keyword pattern.after click on country name text box filled with that country name.

3

In one of the project, I replaced huge dropdowns with the modal dialog which has a table and filters at top. call it Popup lookup table.

So, instead of a dropdown, i put a readonly text box, just beside the text input there;s a link which says 'select', when user click the link, it opens modal dialog with a table and filters at the top, user can search throw data, and select one of the row from table and click 'select' button in dialog footer which will close the dialog and show selected value in read only text input.

Advantage: - Better ability to search records based on various criteria - Better visualization of data prior to selection, as table can show much more attributes of data

  • This is exactly what I am looking for. Did you maybe make a plugin ? – Ferenjito Sep 15 '17 at 11:19
  • Nope, no plugin, implemented it manually. – Sudhir N Sep 15 '17 at 14:50
1

I think, you need to implement categories. If your dropdown is displaying countries, would it be better to group the countries into categories? So, you'll have two dropdowns, one about the continent maybe, and the second is about the country within that continent. You can also use drop down text, in which you can also type in your choice and the drop down will autocomplete it based on the choice it has in its menu. Or you can also build your own drop down menu, which lists the countries not only to down, but also to the right. That way, the users can see more options before they're "forced" to scroll down. And the scroll down won't be a very long list, as you've divided the list into several column in that drop down.

1

To make it work fast you need to use auto-suggest functionality with the text box. Where user can press some keystrokes they remember and they get the whole word as suggestion.

E.g. In case where user need to select their city. So, when user types ny or new it should suggest the new york in the result, and this will make the process faster for the user to select the desired option and feels more usable

Other alternative to go with grouping the drop down list using optgroup

You can read the whole in details here - http://www.importux.com/drop-down-menus-common-misuse/

For auto-suggest feature see this - http://api.jqueryui.com/autocomplete/#entry-examples

0

200-300 isn't so bad to scroll through. We don't get too many new countries that often, so the list is relatively slow-growing.

You could use auto-completion where the user must type at least n (usually 2) characters into a before showing the top m (usually 10) results on a list that will pop up, without a scroll bar.

I think a substring search would work well - show the top m countries in alphabetical order that have the exact letter sequence as what's in the text box after each key press.

  • 3
    actually, it's horrible by modern standards. the search-hybrid is the right answer – New Alexandria Mar 18 '14 at 16:34
0

This article has a nice recommendation especially for country options. Most mobile devices and browsers can provide geo location helping to narrow down the user's choices of location. If their location is not in there or they are using a proxy and the location is invalid, you can default back to the entire list. I would bet with some google searching, you could find an API that would help provide a list of selection options based on geo locations.

https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53

protected by Community Oct 29 at 20:32

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.