Android 选择的插件似乎不适用于移动浏览器

Chosen plugin doesn't seem to work on mobile browsers

提问by Boldizsar

I have set up a Chosen pluginfor 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.

虽然我正在为手机开发它并且它​​在计算机上运行良好，但它在 Apple 和 Android 手机上都被禁用，并且默认用户界面会弹出选择输入。

I'd like to use the plugin on phones.

我想在手机上使用该插件。

采纳答案by dreamweiver

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 "

android 或 IOS 不支持选择，“选择在 iPhone、iPod Touch 和 Android 移动设备上被禁用”

Check Official CHOSEN link here

在此处查看官方选择链接

回答by Aborn Jiang

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

函数browser_is_supportedinchosen.jquery.js说明它故意避免在 Android 和 iPhone 平台上激活（因为几个 UX 问题）。但是你可以自己破解它。

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

回答by Muhammad Waqas

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

AbstractChosen.browser_is_supported功能不允许您在移动设备和 Internet Explorer 上使用此插件，因此您可以自己破解它。

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

找到以下几行chosen.jquery.js并注释此代码。现在选择的插件可以在移动设备上运行。

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

回答by neel upadhyay

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

回答by carmat

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.

在这里发布作为后备我已经实现，因为我依赖 ChosenJS 插件工作，以便可以应用自定义 CSS。希望这对其他人有帮助。

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

免责声明：鉴于问题，@dreamweiver 上面的答案仍然应该是公认的答案。

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-mobileto apply the CSS necessary.

有了这个，我然后.ui-select .chosen-mobile用来应用必要的 CSS。

回答by Onur ?zgüzel

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