“Responsively” select an item from a large closed collection?

Question

I'm building a responsive web application. One of the main focus of this application is to efficiently collect information. In some fields, I need the user to select one value from a large collection of values. Think about a closed catalog of streets, for example. First thing I thought of was to use an autocomplete component, like twitter's bootstrap typeahed: http://twitter.github.com/bootstrap/javascript.html#typeahead

In my opinion this looks great on the desktop, but on mobile devices it is a bit hard to select one of the suggestions. It isn't as great as the native select popup on android or iOS, for example:

However, this native support does not provide dynamic autocomplete support.

Sematically speaking, the correct element to use would be a select because we are selecting something from a closed source of elements. However this elements seems to be pretty "static" as it does not allow one to filter the collection of options, for example. I understand that is why most people implement this as a text field + suggestions.

The excellent Select2 library tries to mitigate this, but the symptons are more or less the same regarding responsiveness.

What is the recommended UI pattern to use in these cases?

Perhaps the only solution would be to make "searchable select boxes" a part of the HTML standard?

Answer 1

First of all, Android has great auto-complete on Swype. I'm not sure this is a solution for you, but it might give you some ideas. Here is an image of the auto-complete on Swype:

From what I can understand vertical scrolling isn't effective here because there are too many choices? What about enhanced vertical scrolling like in Android/iOS contact section when you have alphabetical quick-scrolling on the right side but also scrolling through normally. Another option might be to investigate successful horizontal scrolling options. Horizontal scrolling here sounds odd to me, but if the design fits then the problem will be solved and great design is design that solves problems.

Does that help? Perhaps some screenshots of what you have now would be useful...