Chosen plugin doesn't seem to work on mobile browsers [closed]

Question

I have set up a Chosen plugin for a select field for the user to be able to type-search from a long list.

Although I am developing this for mobile phones and while it works fine on computer, it is disabled on both Apple and Android phones and the default user interface pops up for the select input.

I'd like to use the plugin on phones.

Answer 1

Before using any plugin, try checking its scope.

Chosen is not supported on android or IOS, "Chosen is disabled on iPhone, iPod Touch, and Android mobile devices "

Check Official CHOSEN link here

Answer 2

Function browser_is_supported in chosen.jquery.js illustrates that it deliberately avoids activating on Android and iPhone platform (because of several UX issues). But you can hack it by yourself.

 AbstractChosen.browser_is_supported = function() {
  if (window.navigator.appName === "Microsoft Internet Explorer") {
    return document.documentMode >= 8;
  }
  if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
    return false;
  }
  if (/Android/i.test(window.navigator.userAgent)) {
    if (/Mobile/i.test(window.navigator.userAgent)) {
      return false;
    }
  }
  return true;
};

Answer 3

AbstractChosen.browser_is_supported function does not allow you to use this plugin on mobile devices and internet explorer so you can hack this by yourself.

Find the below lines in chosen.jquery.js and comment this code. Now the chosen plugin will work on mobile devices.

if (!AbstractChosen.browser_is_supported()) {
    return this;
}   
if (!AbstractChosen.browser_is_supported()) {
    return;  
}