jQuery Autocomplete `select` triggered only on second tap on iPhone

Question

Problem: when I use the jQuery autocomplete on an iPhone with Safari (iOS10), I need to tap any entry from the search suggestions twice before they trigger the jQuery select event.

Limitation: this problem does not occur on Android phones or desktops.

Solution starter: for some reason, the official jQuery demo works on iPhone just fine. So it is probably not a jQuery bug.

Steps to reproduce the issue:

1. Visit [example no longer available. AngularJS was too slow, we replaced it with a faster technology]

2. Enter "Zu" into the search field

   

3. Tap on any search suggestion once (the item is visually triggered via CSS, but the JS event is not)

4. Tap again on the same suggestion (everything works)

Relevant JS code:

$location
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    .autocomplete({
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
        source: function(request, response){
            search(request.term, response); 
        },
        classes: {
            'ui-autocomplete':      'mdl-shadow--4dp'
        },
        minLength: 2,
        select: function(event, ui){
            // Problem: On iPhone, only the second tap ends up here...
            event.preventDefault();
            searchDetails(ui.item.id);
        }
    })
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    .click(function(event, options){
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
        this.select();
    })
;   

Relevant HTML markup:

<div class="ui-widget">
    <input class="mdl-textfield__input" type="text" id="location" value="">
    <label class="mdl-textfield__label" for="location">Mein Standort</label>
</div>

How can I make this work on an iPhone such that only one tap is enough to trigger the JS event?