@Nirzar, @Prtksxna, can you help us come up with some neat way to implement this? I'm not a fan of the current approach (screenshots / links to examples below), and it would probably become clunkier with the bigger OOUI widgets. @Anomie and I exchanged some ideas on IRC (pasted the conversation below too), but we didn't really like anything.

Is there a better way to present the choice of one from few hundred options, with several possibly much more commonly used? (If we need a new widget or some variant, I can implement it.)

Screenshots of the HTMLAutoCompleteSelectField used on https://www.mediawiki.org/wiki/Special:OAuthConsumerRegistration/propose:

• First displayed as a dropdown.
  
• When one of the options is selected ("Specific project" in this example), an additional text field with autocompletion is displayed. Only the values from the autocompletion list are valid (you'll get an error if you type anything else).
  

IRC conversation:

[18:13] <MatmaRex> anomie: hey. i'm struggling to understand the purpose/design of HTMLAutoCompleteSelectField
[18:14] <anomie> MatmaRex: Purpose is to avoid having a <select> with 800+ options to dig through.
[18:14] <MatmaRex> anomie: okay, that was exactly what i wanted to ask, why it's not just a big <select>
[18:14] <MatmaRex> anomie: mark and I have been working on OOUI implementation of HTMLForm https://gerrit.wikimedia.org/r/#/c/205719/ and that one kind of didn't fit anything sensibly
[18:18] <MatmaRex> anomie: so, we could probably implement that in the OOUI way the exact same way as it is now (select box + text input with autocomplete), but that's not very neat, i think
[18:19] <MatmaRex> anomie: we have a "combo box" widget, though, and i would try to use that. i'd link you to the OOUI demo to try it, but it is annoyingly down currently
[18:28] <anomie> MatmaRex: Looking at ComboBoxWidget on the demo page locally, it doesn't seem to filter the stuff in the dropdown as you type.
[18:31] <MatmaRex> hmm. yeah, it only selects an option if you type an exact value. so that probably won't work so well, actually
[18:32] <anomie> The more important thing is that typing "en." in the box should only show "en.wikipedia.org", "en.wiktionary.org", and so on in the dropdown. Then probably allowing arrows to select one, or click, or keep typing.
[18:32] <anomie> (well, not for the demo obviously, but for the places it's actually used that's what it's used for)
[18:36] <anomie> MatmaRex: If you need to see the existing implementation in action, you should be able to go to https://www.mediawiki.org/wiki/Special:OAuthConsumerRegistration/propose where it's used for "Applicable project".
[18:37] <anomie> Also https://test.wikipedia.org/wiki/Special:SecurePoll/create, if you have access to that one.
[18:37] <anomie> ("For wiki" field there)
[18:42] <MatmaRex> anomie: hmm, i think this would work better if we changed the <select> to a set of radio buttons, where one (for the 'other' option) would have the autocomplete field in the label area?
[18:43] <MatmaRex> (anomie: yeah, i've been looking at the usage in OAuth, mark is trying to make its forms use the OOUI version in https://gerrit.wikimedia.org/r/#/c/205720/)
[18:43] <anomie> MatmaRex: Maybe. These examples don't have many options in the <select>, but it could get big if there were (e.g. if someone dumped a lot of options into $wgSecurePollCreateWikiGroups)
[18:44] <MatmaRex> we can just say that someone shouldn't do that.
[18:45] <MatmaRex> :P
[18:45] anomie doesn't like that suggestion much
[18:49] <MatmaRex> anomie: i'm going to dump what we said into a bug and ask nirzar or prateek to help us come up with something pretty, i think
[18:49] <anomie> MatmaRex: ok

I just had a thought that this would work well as a regular big dropdown, but with the additional options hidden in a collapsible section. I'll probably try implementing that soon. If I do, I'll put it in MediaWiki rather than OOUI, since this would be a pretty niche widget and the library's size has been ballooning recently.

OTOH, that still has the "800+ options to dig through" problem if you need an option that's in the collapsible section.

Sounds like a simple combobox with an optgroup to me. Here is how Chosen implements it: http://jsfiddle.net/p9jst0yk/

In T98856#1380117, @Tgr wrote:

Sounds like a simple combobox with an optgroup to me. Here is how Chosen implements it: http://jsfiddle.net/p9jst0yk/

Sigh. Do you really find the dropdown in https://jsfiddle.net/bqy5s2qn/ at all usable?

In T98856#1382961, @Anomie wrote:

Do you really find the dropdown in https://jsfiddle.net/bqy5s2qn/ at all usable?

Sure. It's pretty close in behavior to the existing solution, except that

• it's slightly faster as you don't need to select the "all projects" option first and can start typing immediately
• if you have already selected a wiki, switching back to "all wikis" is slightly slower as you need to scroll to the top
• it shows you the list of all projects which is nice for small wikifarms
• it falls back more nicely when there is no JS - you get a list of applicable projects instead of having to figure out the exact name

In T98856#1365553, @Anomie wrote:

OTOH, that still has the "800+ options to dig through" problem if you need an option that's in the collapsible section.

What is the use case here? Does the user have no knowledge of what they are looking for? Seems unlikely in the OAuth consumer registration case, what other cases are there?

In T98856#1382961, @Anomie wrote:

In T98856#1380117, @Tgr wrote:

Sounds like a simple combobox with an optgroup to me. Here is how Chosen implements it: http://jsfiddle.net/p9jst0yk/

Sigh. Do you really find the dropdown in https://jsfiddle.net/bqy5s2qn/ at all usable?

Yes, if I have an idea of what I am looking for, but don't know the exact name, or spelling. Adding more options to @Tgr's example - https://jsfiddle.net/p9jst0yk/2/embedded/result/.