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?