自动填充功能要求您在更新到1.11.0后在iOS中单击两次

Question

使用jQuery 2.1.0和jQuery.ui 1.11.0在iOS 7中测试.iPhone和iPad Mini.适用于Android和常规浏览器.

问题

我们最近从jQuery UI 1.10.0升级到1.11.0,现在,当点击自动完成结果列表中的项目时,您只能获得悬停,您必须再次单击相同的元素才能获得点击事件.这曾经适用于版本1.10.0.

(评论中的JSFiddle链接)

什么行不通

使用CSS {cursor: pointer}不起作用

使用onclick=""不起作用

(评论中的JSFiddle链接)

奇怪的部分

但这里有趣/奇怪的部分.它适用于JSFiddle 编辑视图,但不适用于JSFiddle"/ show"页面.

JSFiddles :( 键入一个字母显示结果"s"是一个很好的)

• Html视图(不起作用)

• 编辑视图(工作)

我已经在这方面工作了好几天,但在测试只有html视图之前无法在JSFiddle中重现它.所以现在我转向你.我不能为我的生活弄清楚为什么一个页面触发点击事件,而另一个页面没有.

我正在使用jQuery自动完成的最基本功能.实际上,使用jQuery UI主页上显示的完全相同的代码.

这个问题

那么,如何在/ show页面上单击iOS中的一次点击才能获得自动完成功能？

(我会在评论中发布其他链接,因为我还没有10个代表.除非我没有足够的代表评论......)

Answer 1

稍后,但是

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

Answer 2

由于一些奇怪的原因,@onlydimon's答案对我不起作用.好像我们确实需要活动mouseenter.以下答案对我来说效果很好.

open: function (result) {

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

我添加了一个条件,以确保它不会在其他设备中中断.

Answer 3

以onlydimon的解决方案为基础:

var input = $("#input")
// Initialize autocomplete
input.autocomplete()
// Retrieve the autocomplete list and remove the mouseenter event
// which seems to trip up iOS Safari
input.autocomplete('widget').off('mouseenter')

我将事件列表缩小到jQuery的'mouseenter'事件.只删除这个修复了我的错误.此外,每次打开列表时都不需要删除它; 一次就够了.

Answer 4

写了一个超级讨厌的黑客，这似乎对我有用。这就是我所做的。

1. 检查我们是否使用触摸设备（在我的例子中，是一个名为 IAmTouchy 的变量）。
2. 监听自动完成结果上的点击（触摸启动）。
3. 在设定的时间后，检查自动完成结果是否仍然可见。如果是，并且某个项目已获得焦点，则触发对其的单击。

4. （可选）再试一次...以防设置的时间不够长，元素无法获得 ui-state-focus 类。

       $('.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);
       });
   

希望有人有更好的解决方案！