Usando jQuery 2.1.0 y jQuery.interfaz de usuario 1.11.0 Probado en iOS 7. el iPhone y el iPad Mini. Funciona en android y regular de los navegadores.

El problema

Hemos actualizado recientemente de jQuery UI 1.10.0 a 1.11.0 y ahora, al hacer clic en un elemento en un autocompletar lista de resultados, sólo se consigue un pase, usted tiene que hacer clic en el mismo elemento nuevo para conseguir un evento click. Esto funciona bien con la versión 1.10.0.

(JSFiddle enlace en los comentarios)

Lo que no funciona

el uso de css {cursor: pointer} no funciona

utilizando onclick="" no funciona

(JSFiddle enlace en los comentarios)

Lo más raro

Pero aquí viene la diversión/raro. Funciona en JSFiddle editar ver, pero no en el JSFiddle «/mostrar la página».

JSFiddles: (escriba una carta para mostrar los resultados de la «s» es una buena)

He estado trabajando en esto durante días, pero no había sido capaz de reproducir en JSFiddle antes de la prueba, sólo la vista html. Así que ahora me dirijo a vosotros. Yo no puedo por la vida de averiguar por qué la página desencadena un evento click, y el otro no.

Estoy utilizando la función más básica de jQuery autocomplete. De hecho, usando el mismo código que se presenta en jQuery interfaz de usuario de la página de inicio.

La pregunta

Así que, ¿cómo conseguir que la función autocompletar de trabajo con un solo clic en iOS sobre el /la página de la exposición?

(Voy a publicar enlaces en los comentarios porque no tengo 10 rep todavía. A menos que no tengo suficiente rep comentar…)

Enlaces: jQuery UI Autocomplete página de inicio | «Correcciones» que no funcionan | jQuery interfaz de usuario de la versión 1.10.0 donde funciona por Favor, agregue «/» a la final de la url cuando en realidad las pruebas de la conducta. La vista de edición cambia el comportamiento.
Informe de error para este problema: bugs.jqueryui.com/ticket/10544

OriginalEl autor Snorre Kim | 2014-08-13

11 Comentarios

  1. 47

    Sólo un poco más tarde, pero

    $("#input").autocomplete({
        open: function(event, ui) {
            $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
        }
    });
    Gracias. Que trabajó para mí.
    Que también solucionado problema para la selección , sin Embargo, no haga clic en archivo de autocompletar de entrada que me he registrado en principio. ¿tiene usted alguna idea ?
    No funciona con autoFocus conjunto para true, porque entonces siempre el primer elemento es seleccionado independientemente de lo que en realidad haga clic en. De lo contrario, una buena solución.
    Esta «solución» es sólo romper el autocompletar. No escuchar la respuesta.
    las soluciones que funcionan si autoFocus es true?

    OriginalEl autor onlydimon

  2. 20

    Por alguna extraña razón @onlydimon's respuesta no funcionó para mí. Parece que necesitamos evento mouseenter. Siguiente respuesta funcionado bien para mí.

    open: function (result) {
    
                if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
                    $('.ui-autocomplete').off('menufocus hover mouseover');
                }
            },

    He añadido una condición para asegurarse de que no se rompa en otros dispositivos.

    esto lo hizo para mí. menufocus fue el culpable en mi final. a pesar de que sólo tenía que llamar de la una vez, no cada vez que se abre. estaba usando la función de autocompletar en reaccionar por lo que me acaban de poner el if declaración en componentDidMount y se utiliza un ref para agarrar el nodo dom. $(this.refs.foo.getDOMNode()).autocomplete('widget').off('menufocus')

    OriginalEl autor Sangram Nandkhile

  3. 12

    Edificio en onlydimon la solución:

    var input = $("#input")
    //Initialize autocomplete
    input.autocomplete()
    //Retrieve the autocomplete list and remove the mouseenter event
    //which seems to trip up iOS Safari
    input.autocomplete('widget').off('mouseenter')

    He reducido la lista de eventos a los que sólo jQuery ‘mouseenter’ evento. La eliminación de este corrige el bug para mí. Además, no hay necesidad de quitar cada vez que la lista está abierta; una vez es suficiente.

    No funciona con autoFocus conjunto para true, porque entonces siempre el primer elemento es seleccionado independientemente de lo que en realidad haga clic en. De lo contrario, una buena solución.
    Es un trabajo para mí. Gracias 🙂

    OriginalEl autor fvsch

  4. 3

    Escribió un super desagradable hack que parece hacer el truco para mí. Esto es lo que hice.

    1. Comprobar que estamos usando un dispositivo táctil (en mi caso, una variable que he llamado IAmTouchy.
    2. Escuchar un toque (touchstart) en un autocompletar resultado.
    3. Después de un tiempo establecido, comprobar para ver si la función de autocompletar los resultados son todavía visibles. Si lo son, y un elemento se concentra desencadenar un clic en él.
    4. (opcional) Intentar una vez más… en caso de que el conjunto de tiempo no fue suficiente para el elemento al aumento de la interfaz de usuario-estado-clase de enfoque.

          $('.autocompleteContainer').on('touchstart', 'li.ui-menu-item', function(){
      
              var $container = $(this).closest('.autocompleteContainer'),
                  $item = $(this);
      
              //if we haven't closed the result box like we should have, simulate a click on the element they tapped on.
              function fixitifitneedsit() {
                  if ($container.is(':visible') && $item.hasClass('ui-state-focus')) {
      
                      $item.trigger('click');
                      return true; //it needed it
                  }
                  return false; //it didn't
              }
      
              setTimeout(function () {
                  if (!fixitifitneedsit()) {
                      setTimeout(fixitifitneedsit, 600);
                  }
              }, 600);
          });

    Esperemos que alguien tiene una mejor solución, aunque!

    OriginalEl autor Liam Johnston

  5. 3
    $.ajax({
     url: '/ajax/xyz.json'
    })
    .done(function( data ) {
      $('#id').autocomplete({
        source: data,
        open: function( event, ui ) {
            if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
              $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
            }
        },
        select: function( event, ui ) {
          window.location.href = ui.item.value;
          return false;
        }
      });
    });

    Esto funcionó para mí (obras en drupal 8). Ahora un toque en los dispositivos iOS redirigir a la página de resultado de búsqueda.

    Gracias. Es la solución más simple en este hilo. Funciona en iOS 10. función open() es la parte pertinente.

    OriginalEl autor YPatel

  6. 1

    Basado en Liam Johnston solución, esto lo escribí uno que funciona para mí con enfoque automático se establece a true:

    var movedWhildAutocomplete = false;
    $(document)
        .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){
            $(this).trigger('mouseenter');
            movedWhildAutocomplete = false;
        })
        .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){
            movedWhildAutocomplete = true;
        })
        .on('touchend', '.ui-autocomplete li.ui-menu-item', function(){
            if (!movedWhildAutocomplete) {
                var $el = $(this);
                if ($el.is(':visible') && $el.hasClass('ui-state-focus')) {
                    $el.trigger('click');
                }
            }
            movedWhildAutocomplete = false;
        });

    OriginalEl autor Raphaël Malié

  7. 1

    Autocompletar widget tiene algunos construido en eventos a los que puedes añadir en tu código…
    jqueryui

    Yo estaba teniendo el mismo problema y finalmente descubrió cómo lo tweek el código y la fuerza de los dispositivos móviles para responder con un clic.

    Básicamente para dispositivos móviles (iOs) cuando toque en la lista de autocompletar ‘de una vez’, se activará el «foco» del evento, si hace clic una vez más (2do clic) se va a leer el evento como «seleccionar». Así, en orden de fuerza de los dispositivos iOs para seleccionar en un solo clic usted tiene a la fuerza para seleccionar el primer clic.

    $("#input").autocomplete({
      source: yourSourceList,
      focus: function(event, ui) {
        $(this).val(ui.item.value);
        $(".ui-menu").hide(); //you can also console.log(ui.item.value); for the selected widget object
      }
    });

    OriginalEl autor andrewbkil

  8. 0

    Uso fastclick.js se va a resolver este problema. Sé que esto js se utiliza para la eliminación de 300ms tap delay pero resuelto este problema también para mí.

    1. Descarga el record de la versión de FastClick (como alternativa, puede seguir las instrucciones para instalar el no-record de la versión aquí)

    2. Incluir el archivo en el proyecto:

      <script src = «js/fastclick.min.js»></script>

    3. Adjuntar el FastClick objeto en el documento después de FastClick ha sido cargado:

      var attachFastClick = Origami.fastclick;

      attachFastClick(documento.cuerpo);

    NOTA: Si intenta utilizar FastClick la no-record manera, yo.e:

    <script src = "js/fastclick.js"></script>;

    A continuación, utilizar

    FastClick.adjuntar(documento.cuerpo);

    pero incluyendo el record de archivo que recibirá los errores (diciendo que FastClick es indefinido). Si usted está utilizando el record de archivo debe tener acceso a él a través de Origami.

    OriginalEl autor Swapnil Man

  9. 0

    Solución de Raphaël Malié es casi perfecto, pero necesita evt.preventDefault() para touchend, de lo contrario se generará un clic en un enlace/botón que está debajo de artículo pulsado.

        var movedWhildAutocomplete = false;
        $(document)
            .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){
                $(this).trigger('mouseenter');
                movedWhildAutocomplete = false;
            })
            .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){
                movedWhildAutocomplete = true;
            })
            .on('touchend', '.ui-autocomplete li.ui-menu-item', function(evt){
                if (!movedWhildAutocomplete) {
                    var $el = $(this);
                    if ($el.is(':visible') && $el.hasClass('ui-state-focus')) {
                        evt.preventDefault();
                        $el.trigger('click');
                    }
                }
                movedWhildAutocomplete = false;
            });

    OriginalEl autor CRK

  10. 0

    Estoy trabajando con jQuery UI y córdoba, y tengo el mismo problema en la aplicación, mi solución para ese problema es este:

    $('.ui-autocomplete').mouseenter( function( e ){
        e.preventDefault();
        e.stopPropagation();
    });

    Esta parada el foco en el elemento seleccionado.

    OriginalEl autor Jorge Mejia

  11. 0

    Este código funciona con enfoque automático

    $("#input").autocomplete({
        source: ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5"],
        autoFocus: true,
        focus: function(event, ui) {
            if (navigator.userAgent.match(/(iPod|iPhone|iPad)/) && event.bubbles) {
                $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", {item: ui.item} );
                $(this).autocomplete("close");
            }
            return false;
        },
        select: function(event, ui) {
            $(this).val(ui.item.label);
        }
    });

    OriginalEl autor cby016

Dejar respuesta

Please enter your comment!
Please enter your name here