Autocompletar requiere que usted haga clic dos veces en iOS después de la actualización a 1.11.0

Sólo un poco más tarde, pero

$("#input").autocomplete({
    open: function(event, ui) {
        $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
    }
});

OriginalEl autor onlydimon

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.

OriginalEl autor Sangram Nandkhile

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.

OriginalEl autor fvsch

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

$.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.

OriginalEl autor YPatel

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é

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

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

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

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

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