Выбранный плагин, похоже, не работает на мобильных браузерах

Я создал плагин Chosen для поля выбора, чтобы пользователь мог вводить поиск из длинного списка.

Хотя я разрабатываю это для мобильных телефонов, и, хотя он отлично работает на компьютере, он отключен как на телефонах Apple, так и на Android, и пользовательский интерфейс по умолчанию появляется для ввода выбора.

Я бы хотел использовать плагин на телефонах.

Solutions Collecting From Web of "Выбранный плагин, похоже, не работает на мобильных браузерах"

Перед использованием любого плагина попробуйте проверить его область действия.

Выбранный не поддерживается на Android или IOS, «Chosen отключен на iPhone, iPod Touch и мобильных устройствах Android»

Проверьте ссылку CHOSEN здесь.

Функция browser_is_supported в chosen.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; }; 

Функция AbstractChosen.browser_is_supported не позволяет использовать этот плагин на мобильных устройствах и в Internet Explorer, чтобы вы могли взломать это самостоятельно.

Найдите приведенные ниже строки в chosen.jquery.js и прокомментируйте этот код. Теперь выбранный плагин будет работать на мобильных устройствах.

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

Отключено в планшете для мобильных устройств

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

Для меня это была эта строка:

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

Изменилось на это, и это сработало как шарм.

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

Публикация здесь в качестве резервной копии, которую я реализовал, поскольку я был в зависимости от плагина ChosenJS, чтобы работать, чтобы пользовательский CSS мог применяться. Надеюсь, это помогает кому-то другому.

Отказ от ответственности: ответ выше на @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') ); } }); }); } } 

При этом я использую .ui-select .chosen-mobile для применения CSS.