onlyWebPro .com - Online Web Development Tutorials

If you’ve implemented jQuery UI Autocomplete library (version 1.11.0) in your web project, you might aware that you have to tap twice (double tap) on the Autocomplete drop down item in iOS devices (such as iPhone & iPad).

Take a look at the demo – jQuery Autocomplete’s User Experience Problem in iOS Devices. (Please view it with your iOS devices)

Let’s consider this:

1. Your app’s users type a keyword in your app’s search box and it returns a list of suggestion menu;
2. Your users read the suggestion menu from top to bottom, and finally they found the matched item, they tap on it…
3. First tap was highlighted the matched item, but the page doesn’t move on to the item’s page…
4. Your users have to tap again on the matched item.
5. Now only the page redirecting to the item’s page.

See? This will cause a very serious User Experience (UX) problem if your users browsing your web app with their iOS devices. In order to solve this strange behavior, here’s what I did:

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

The event handlers – “menufocus“, “hover“, “mouseover“, “mouseenter” that attached with the on() method has been removed from jQuery Autocomplete when the suggestion menu is opened or updated. So, the “hover” event will no longer exist in the Autocomplete!

View Demo – Fixed Version (Please view it with your iOS devices)

Hope it helps!