jQuery Пользовательский интерфейс автозаполнения на iPhone (iOS): выбор одним щелчком мыши и скрытие клавиатуры

Question

У меня есть текстовое поле jQuery UI 1.12.1 AutoComplete в левой части этой страницы, которое собирает названия городов.

http://guigems.com/worldclimate/

На iPhone автозаполнение пользовательского интерфейса jQuery не делало выбор одним щелчком, и вам нужно было сначала указать элемент, а затем «подтвердить» другим щелчком, но я обнаружил решение этой проблемы. Решение, позволяющее избежать двойного выбора, -

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

. Это решение исправляет двойной выбор , но клавиатура iPhone не go. Я попробовал следующее, чтобы затем вызвать Blur и сделать его на расстоянии go:

    select: function(event, ui) {
        event.preventDefault();
        $('#cityautocomplete').val('');
        addSeries(ui.item);
        // These are my attempts to blur & hide keyboard on iPhone,
        // but they don't work
        $('#cityautocomplete').blur(); // Make the iPhone keyboard go away
        document.activeElement.blur(); // Make the iPhone keyboard go away
    }

Я могу сделать выбор одним щелчком, но iPhone Клавиатура остается открытой (с "Готово") около 70 % времени. Иногда он go удаляется автоматически. Если вы поиграете с этим автозаполнением и добавите много записей, вы увидите, что он остается открытым в большинстве случаев.

Если вы хотите увидеть JS, он здесь: http://guigems.com/worldclimate/resources/app.js ->

function setUpCityAutoComplete() { .. }

Вот полный код автозаполнения:

$('#cityautocomplete').autocomplete({
    minLength: 2,
    /*
     The following is required for iOS Single-Click selection (and works),
     https://stackoverflow.com/questions/25286685/autocomplete-requires-you-to-click-twice-in-ios-after-update-to-1-11-0
    */
    open: function (result) {
        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
            $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
        }
    },      
    source: function (request, response) {
        response($.map(citydata, function (obj, key) {

            var cityname = obj.city.toUpperCase();

            // City must not be already plotted in the chart
            var offer = chart.data.datasets.filter(function(obj) {
                return (cityname == obj.label.toUpperCase());
            })[0];

            if (offer == null) {                
                if (cityname.indexOf(request.term.toUpperCase()) != -1) {               
                    return {
                        label: getLabel(obj),
                        value: obj.temps
                    }
                }
            } else {
                return null;
            }
        }));            
    },    
    select: function(event, ui) {
        event.preventDefault();
        $('#cityautocomplete').val('');
        addSeries(ui.item);
        // These are my attempts to blur & hide keyboard on iPhone,
        // but they don't work: iPhone Keyboard stays open ~70% of the time
        $('#cityautocomplete').blur(); // Make the iPhone keyboard go away
        document.activeElement.blur(); // Make the iPhone keyboard go away
    }
});