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

Answer 1

For me it was this line:

        }, AbstractChosen.browser_is_supported = function() {
            return "Microsoft Internet Explorer" === window.navigator.appName ? document.documentMode >= 8 : /iP(od|hone)/i.test(window.navigator.userAgent) ? !1 : /Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent) ? !1 : !0
        }

changed to that and it worked like a charm.

}, AbstractChosen.browser_is_supported = function() {          
return true;
}

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

to disabled in tablet mobile

 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))
        if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent)) 
        {
            return false;
        }
        if (/Android/i.test(window.navigator.userAgent)) {
            if (/Mobile/i.test(window.navigator.userAgent)) {
                return false;
            }
        }
        return true;
    };

Answer 4

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 5

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;  
}

Answer 6

Posting here as a fallback I've implemented as I was depending on the ChosenJS plugin to work so that custom CSS could be applied. Hopefully this helps someone else.

Disclaimer: The answer above by @dreamweiver should still be the accepted answer, given the question.

var chosenSelects = $('.ui-select').find('.chosen-select, [chosen]'),
    $select, $option;

if (chosenSelects) {
    chosenSelects.chosen();

    // Check for 'chosen' elements on mobile devices
    // -----
    // Given that ChosenJS has expressly been disabled from running
    // on mobile browsers, the styles have to be applied manually.
    // Source: https://github.com/harvesthq/chosen/pull/1388
    // -----
    // The code below gathers all 'chosen' selectors and adds
    // 'chosen-mobile' as a className. This className is then
    // used to apply the necessary styles for mobile browsers.
    // Within each select, if an 'option' has an empty value,
    // then that value will be given 'selected' and 'disabled'
    // attributes to act as a placeholder, adopting the text
    // in the 'data-placeholder' as the text to be displayed.
    if ( /iP(od|hone)/i.test(window.navigator.userAgent)
        || (/Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent)) ) {
        chosenSelects.each(function () {
            $select = $(this);
            $select.addClass('chosen-mobile');

            $select.find('option').each(function () {
                $option = $(this);

                if ( $option.val() == '' ) {
                    $option
                        .attr('selected', 'selected')
                        .attr('disabled', 'disabled')
                        .text( $select.data('placeholder') );
                }
            });
        });
    }
}

With this, I then use .ui-select .chosen-mobile to apply the CSS necessary.