Choosing from Long Option Lists in Web Forms
Recently I have been exploring approaches toward choosing from a long list, such as US states or world countries, targeting all of mouse/keyboard & trackpad & touchscreen, using one same/single web form.
Real world use cases I have encountered in the last year include:
- choose from 75 names (target: laptop, Android tablet)
- choose from 300 names (laptop, Android tablet)
- choose from 100 codes with descriptions (desktop, iPhone)
- choose from 2000 codes with descriptions (desktop, iPhone)
Sample or demonstration "laboratory" can be found at:
With a vanilla SELECT element, in a typical desktop-type GUI web browser, keying in a prefix of the desired value jumps to values with a matching prefix - which is effective in the case of sorted lists of options. However, with the Android browser, I am not aware of any way to invoke the keyboard while the SELECT element is activated. Does anyone know a trick of which I'm unaware? Can anyone comment whether any other mobile browser allows keyboard prefix in a SELECT element?
Auto-complete is helpful to narrow down a long list by typing just a few characters of the desired value. However, in the Android browser, the popped-up on-scrreen keyboard tends to cover over most of the list of matching items. Can anyone comment whether other mobile browsers do the same?
My custom complete/combo, in my testing, works reasonably with desktop Fireox & Opera and with Android-ICS-4.0, but does not work with Android-GB-2.3 older but still-common version. I am curious how it fares in other mobile browsers besides Android.
If you can try out the comparative demonstrations, please post a comment about which ones worked better and worse in your experience - thanks!