自动完成需要您在更新到 1.11.0 后在 iOS 中单击两次

IT技术 javascript jquery jquery-ui ios7 jquery-ui-autocomplete
2021-03-15 19:16:37

使用 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 视图之前无法在 JSFiddle 中重现它。所以现在我转向你。我一生都无法弄清楚为什么一个页面会触发点击事件,而另一个页面则不会。

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

问题

那么,如何在 iOS 中的 /show 页面上一键完成自动完成?

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

6个回答

过了一会儿,但

$("#input").autocomplete({
    open: function(event, ui) {
        $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
    }
});
@nachtigall任何变通办法,如果工作autoFocustrue
2021-04-24 19:16:37
不适用于autoFocusset to true,因为无论您实际单击什么,总是会选择第一个项目。否则很好的解决方法。
2021-05-04 19:16:37
此“修复”只会破坏自动完成功能。不要听那个答案。
2021-05-09 19:16:37
这也解决了选择问题,但是它不会文件单击我在开始时注册的自动完成输入。你有什么主意吗 ?
2021-05-16 19:16:37
谢谢,这对我有用,尤其是我正在使用 jquery tagit。
2021-05-19 19:16:37

出于某种奇怪的原因,@onlydimon's答案对我不起作用。看起来我们确实需要 event mouseenter以下答案对我来说效果很好。

open: function (result) {

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

我添加了一个条件以确保它不会在其他设备中损坏。

这是为我做的。menufocus是我的罪魁祸首。虽然我只需要取消一次,而不是每次打开。在 React 中使用自动完成功能,所以我只是将if语句放入componentDidMount并使用 aref来获取 dom 节点。$(this.refs.foo.getDOMNode()).autocomplete('widget').off('menufocus')
2021-05-09 19:16:37
这有效,但它不会删除 iPhone 上的键盘
2021-05-12 19:16:37

基于 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' 事件。仅删除这个就为我修复了错误。另外,每次打开列表时都不需要删除它;一次就够了。

不适用于autoFocusset to true,因为无论您实际单击什么,总是会选择第一个项目。否则很好的解决方法。
2021-05-18 19:16:37

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

  1. 检查我们是否使用了触摸设备(在我的例子中,是一个我称之为 IAmTouchy 的变量。
  2. 聆听自动完成结果上的点击 (touchstart)。
  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);
        });
    

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

$.ajax({
 url: '/ajax/xyz.json'
})
.done(function( data ) {
  $('#id').autocomplete({
    source: data,
    open: function( event, ui ) {
        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
          $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
        }
    },
    select: function( event, ui ) {
      window.location.href = ui.item.value;
      return false;
    }
  });
});

这对我有用(也适用于 drupal 8)。现在一键点击 iOS 设备重定向到搜索结果页面。

谢谢。这是该线程中最简单的解决方案。适用于 iOS 10。 open() 函数是相关部分。
2021-05-07 19:16:37