Автозаполнение требует, чтобы вы дважды щелкнули iOS после обновления до 1.11.0

Ответ 1

Немного позже, но

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

Ответ 2

По какой-то странной причине ответ @onlydimon's не работал у меня. Похоже, нам нужно событие mouseenter. Следующий ответ сработал хорошо для меня.

open: function (result) {

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

Я добавил условие, чтобы убедиться, что оно не сломается на других устройствах.

Ответ 3

Построение решения onlydimons:

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

Я сузил список событий только для события jQuery "mouseenter". Удаление только этого исправляет ошибку для меня. Кроме того, нет необходимости удалять его при каждом открытии списка; один раз достаточно.

Ответ 4

Написал супер неприятный хак, который, кажется, делает трюк для меня. Вот что я сделал.

• Убедитесь, что мы используем сенсорное устройство (в моем случае переменная, которую я назвал IAmTouchy.
• Слушайте нажатие (touchstart) по результату автозаполнения.
• По истечении установленного времени проверьте, все ли видимы результаты автозаполнения. Если они есть, и элемент сфокусирован, нажмите на него щелчок.

• (необязательно) Попробуйте еще раз... в случае, если заданное время было недостаточно для того, чтобы элемент получил класс u-state-focus.

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

Надеюсь, у кого-то есть более приятное решение!

Ответ 5

$.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;
    }
  });
});

Это сработало для меня (работает и на drupal 8). Теперь одно нажатие на устройствах iOS перенаправляется на страницу результатов поиска.

Ответ 6

На основе решения Liam Johnston я написал этот файл, который работает для меня с автофокусом, установленным в 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;
    });

Ответ 7

Виджет Autocomplete имеет некоторые встроенные события, которые вы можете добавить к своему коду...  jqueryui

У меня была такая же проблема и, наконец, выяснили, как подкрутить код и заставить мобильные устройства отвечать одним нажатием.

В основном для мобильных устройств (iOs), когда вы нажимаете на список автозаполнения "один раз", он запускает событие "focus", если вы нажмете еще раз (второй щелчок), он будет считать событие "select". Поэтому, чтобы заставить устройства iO выбрать один клик, вам нужно заставить его выбрать первый клик.

$("#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
  }
});

Ответ 8

Используйте fastclick.js, он решит эту проблему. Я знаю, что этот js используется для удаления задержки 300мс, но он решил эту проблему и для меня.

• Загрузите уменьшенную версию FastClick (в качестве альтернативы вы можете следовать инструкциям по установке безрискованной версии здесь)

• Включите файл в свой проект:

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

• Прикрепите объект FastClick к документу после загрузки FastClick:

  var attachFastClick = Origami.fastclick;

  attachFastClick (document.body);

ПРИМЕЧАНИЕ. Если вы попытаетесь использовать FastClick, это не-минированный способ, например:

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

Затем используйте

FastClick.attach(document.body);

но включите миниатюрный файл, вы получите ошибки (сообщив, что FastClick - undefined). Если вы используете мини файл, вы должны получить к нему доступ через Origami.

Ответ 9

вы, вероятно, можете использовать событие focus из автозаполнения!

focus (event, ui)

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  var selectAction = function(event, ui) {
    //do whatever you want with event and ui objects
    console.log(ui.item)
  }

  $("#tags").autocomplete({
    source: availableTags,
    focus: selectAction,
    select: selectAction
  });
});

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<label for="tags">Tags:</label>
<input id="tags">

Ответ 10

Решение от Raphaël Malié почти идеально, но для touchhend требуется evt.preventDefault(), иначе он будет генерировать щелчок по ссылке/кнопке, которая находится под нажатым элементом.

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

Ответ 11

Я работаю с jQuery UI с и кордорой, и у меня такая же проблема в приложении, мое решение для этой проблемы таково:

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

Это остановит фокусировку на выбранном элементе.

Ответ 12

Этот код работает с автофокусом

$("#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);
    }
});