El complemento elegido no parece funcionar en navegadores móviles

He configurado un complemento Elegido para un campo de selección para que el usuario pueda escribir la búsqueda desde una lista larga.

Aunque estoy desarrollando esto para teléfonos móviles y mientras que funciona bien en la computadora, está deshabilitado en Apple y teléfonos Android y la interfaz de usuario por defecto aparece para la entrada seleccionada.

Me gustaría usar el plugin en los teléfonos.

Antes de usar cualquier complemento, intente comprobar su alcance.

Elegido no es compatible con android o IOS, "Elegido está deshabilitado en iPhone, iPod Touch y dispositivos móviles Android"

Revise el enlace oficial CHOZO aquí

La función browser_is_supported in chosen.jquery.js ilustra que evita deliberadamente la activación en plataforma Android y iPhone ( debido a varios problemas UX ). Pero puedes cortarlo por ti mismo.

  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 función AbstractChosen.browser_is_supported no le permite usar este complemento en dispositivos móviles e Internet Explorer para que pueda hackearlo por usted mismo.

Encuentre las líneas de abajo en chosen.jquery.js y comente este código. Ahora el complemento elegido funcionará en dispositivos móviles.

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

Inhabilitar en tableta móvil

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

Para mí fue esta línea:

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

Cambiado a eso y funcionó como un encanto.

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

Publicar aquí como un fallback he implementado como yo estaba dependiendo de la ChosenJS plugin para trabajar para que CSS personalizado podría ser aplicado. Espero que esto ayude a alguien más.

Descargo de responsabilidad: La respuesta anterior por @dreamweiver todavía debe ser la respuesta aceptada, dada la pregunta.

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

Con esto, entonces uso .ui-select .chosen-mobile para aplicar el CSS necesario.

  • Html5 etiqueta de vídeo para jugar a pantalla completa con Android
  • ¿Cómo evitar hacer clic en el elemento html inferior al hacer clic en el elemento html encima de él en dispositivos táctiles?
  • Jquery keyup no funciona en Android
  • JQuery no funciona en WebView
  • Cordova 3.4 - Detectar evento de teclado
  • ¿Divide la pantalla en dos divisiones usando la framwork iónica?
  • JQuery Autocompletar trabajando en Chrome pero no en android usando phonegap
  • Evento de clic de JQuery de un elemento div en li no disparado en Safari móvil
  • Forzar el teclado abierto en android
  • Pantalla de inicio de la aplicación de Android con jQuery Mobile
  • Cómo evitar la congelación de la aplicación PhoneGap en Android cuando se realiza la llamada asíncrona AJAX?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.