Autocomplete requires you to click twice in iOS after update to 1.11.0

Question

Using jQuery 2.1.0 and jQuery.ui 1.11.0 Tested in iOS 7. iPhone and iPad Mini. Works on android and regular browsers.

The problem

We recently upgraded from

Answer 1

Use fastclick.js it will solve this problem. I know this js is used for removing 300ms tap delay but it solved this problem also for me.

1. Download the minified version of FastClick (alternatively, you can follow the instructions for installing the non-minified version here)

2. Include the file in your project:

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

3. Attach the FastClick object to the document after FastClick has been loaded:

   var attachFastClick = Origami.fastclick;

   attachFastClick(document.body);

NOTE: If you try using FastClick the non-minified way, i.e:

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

Then use

FastClick.attach(document.body);

but are including the minified file you will receive errors (telling you that FastClick is undefined). If you are using the minified file you must access it through Origami.

Answer 2

Solution from Raphaël Malié is almost perfect, but it needs evt.preventDefault() for touchend, otherwise it will generate a click on a link/button that is under clicked item.

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

Answer 3

Autocomplete widget has some built in events that you can add on to your code... jqueryui

I was having the same problem and finally figured out how to tweek the code and force mobile devices to respond with one click.

Basically for mobile devices (iOs) when you tap on the autocomplete list 'once', it will trigger the "focus" event, if you click once more (2nd click) it will read the event as "select". So in order to force iOs devices to select on one click you have to force it to select on the first click.

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

Answer 4

you can probably can use the focus event from autocomplete!

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">

Answer 5

I´m working with jQuery UI with and cordova, and I have the same problem in the app, my solution for that problem is this:

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

This stop the focus on the selected item.

Answer 6

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

This worked for me (works on drupal 8 as well). Now one tap on iOS devices redirect to search result page.