Mobile support for chosen
Note: this patch is quite old, so be aware there might be errors on the latest version on chosen.
Chosen is a jQuery plugin which makes select boxes more user-friendly. Currently, support is disabled on mobile devices for various reasons. Enabling the support requires a hack in the source code for now in the AbstractChosen.browser_is_supported function to return true when the userAgent finds Android or iPhone/iPad. You can download the patched version at the bottom (or detail) of the article. The current version is 1.1.0
Chosen will now be enabled on mobile, but touching the element will not work nicely since the plugin doesn't listen for the touchstart event to trigger the functionality. Opening the select box requires touching the element for at least a couple of seconds, which isn't really user-friendly. Luckily, there's an easy way to get around this by writing a couple lines of javascript:
// Chosen touch support.
if ($('.chosen-container').length > 0) {
$('.chosen-container').on('touchstart', function(e){
e.stopPropagation(); e.preventDefault();
// Trigger the mousedown event.
$(this).trigger('mousedown');
});
}That's it, fully functional chosen support on mobile devices!
| Attachment | Size |
|---|---|
| chosen.jquery.min_.js.txt | 26.33 KB |