typeahead.js iOS Safari vs Standalone Web App Differences

Question

I understand that typeahead.js does not support mobile yet.

Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?

The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.

Is this type of behavior documented anywhere or known for iOS?

Thanks.

Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).

$(document).on('click', '.tt-suggestion', function(e) {
  alert('clicked');
});

Answer 1

I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.

To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:

$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
  $(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});

You might also be able to try using a listener:

$('input.typeahead').change(function(e) {
  $(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});

Or using an event delegator:

$('.tt-dropdown-menu').click(function(e) {
  $(e.target).children('p').addClass('needsclick');
});

Note: functions are untested, they are based off memory.