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

问题

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.

回答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

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

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

回答4:

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

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/22016578/chosen-plugin-doesnt-seem-to-work-on-mobile-browsers

标签

javascript

android

jquery

jquery-chosen