harvesthq/chosen — pull request #1973 by jordanstephens (2014-06-17 20:29:38+00:00)
Title: Allow native select interface for iOS (including iPad) and Android—potential improvement over #1388

Using chosen on small touch screens can be difficult and feel clumsy. It looks like this was previously discussed in #1388, but the solution was to totally disable chosen for iPhones, iPods, and Android.

I think we can do a little better than that by combining the superior inactive-state UI of chosen with the superior active-state UI of the mobile device browser's select field interface. Not to mention the other features of chosen, [such as `max_selected_options`](https://github.com/harvesthq/chosen/pull/1388#issuecomment-37421975), that are lost right now by completely disabling chosen for mobile users.

We can accomplish this through a sort-of trick where a form element's opacity can be set to 0 so that it is unseen while still remaining interactive.

In this case, we can render the `.chosen-select` node in front of the `.chosen-choices` or `.chosen-single` node, but with an opacity of 0, so that it is invisible but interactive.

![img_0003](https://cloud.githubusercontent.com/assets/706922/3305770/2b00d5aa-f65a-11e3-8a53-bbb19661bb13.PNG)
![img_0005](https://cloud.githubusercontent.com/assets/706922/3305852/2bbee3a0-f65b-11e3-8a60-3ec777adea44.PNG)

This *does* come at the expense of search on iPads, but I think the native experience so far outweights the default chosen experience here that it is an acceptable compromise.

Additionally, all of this behavior can be toggled with a `use_native_interface` option so the current (non-native) behavior could be forced if desired. However, I have configured it to be enabled by default for iOS (including iPads) and for Android through the same userAgent string matching that was previously used to disable chosen on those devices.

This does require one major change to the markup structure: `.chosen-select` is now nested inside of `.chosen-container` rather than being a previous sibling to it. I did this so I could use `.chosen-container` as a positioning anchor for `.chosen-select`.

Happy to make adjustments if you think anything could be better. Thanks!