jqueryのautocompleteがios/safariで2回タップしないと選択できない
jqueryのautocompleteを実装したのですが、ios/safariで2回タップしないと選択できない挙動をしております。
ほぼ同じ内容の質問が英語版のstackoverflowにあり試してみました。
https://stackoverflow.com/questions/25286685/autocomplete-requires-you-to-click-twice-in-ios-after-update-to-1-11-0
以下の対処法だと、挙動自体は想定したものになるのですが、少し強引な気がしています。
$("#input").autocomplete({
open: function(event, ui) {
$('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
}
});
もう一つの方法は実装してみたのですが、うまく想定した通りの挙動をしませんでした。
$('.autocompleteContainer').on('touchstart', 'li.ui-menu-item', function(){
var $container = $(this).closest('.autocompleteContainer'),
$item = $(this);
//if we haven't closed the result box like we should have, simulate a click on the element they tapped on.
function fixitifitneedsit() {
if ($container.is(':visible') && $item.hasClass('ui-state-focus')) {
$item.trigger('click');
return true; // it needed it
}
return false; // it didn't
}
setTimeout(function () {
if (!fixitifitneedsit()) {
setTimeout(fixitifitneedsit, 600);
}
}, 600);
});
もしうまく1回でタップし選択できるうまいやり方をご存知の方がいれば、教えていただきたいです。
よろしくお願いいたします。