在更新到1.11.0之后,自动完成要求您在iOS中点击两次

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

问题

我们最近从jQuery UI 1.10.0升级到了1.11.0,现在,当点击自动完成结果列表中的一个项目时,只会得到hover,您必须再次单击相同的元素才能获得点击事件。 这用于在1.10.0版本中正常工作。

(JSFiddle链接的评论)

什么都行不通

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

使用onclick=""不起作用

(JSFiddle链接的评论)

奇怪的部分

但是,有趣/怪异的部分。 它在JSFiddle 编辑视图中工作,但不在JSFiddle“/ show”页面上。

JSFiddles 🙁 键入一个字母来显示结果“是好的”)

  • Html视图 (不起作用)

  • 编辑视图 (作品)

我一直在这个工作了几天,但没有能够在JSFiddle中只testingHTML视图之前重现它。 所以现在我转向你。 我不能为我的生活弄清楚为什么一个页面触发一个点击事件,而另一个则不是。

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

这个问题

那么,如何在/ show页面的iOS中单击一下自动完成?

(我会在评论中张贴额外的链接,因为我还没有10个代表,除非我没有足够的代表评论…)

稍后,但是

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

出于某种奇怪的原因@onlydimon's答案不适合我。 看来我们确实需要事件mouseenter 。 以下答案对我很好。

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

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

以唯一的解决scheme为基础:

 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”事件。 删除只是这个修复了我的错误。 而且,每次打开列表时不需要删除它; 一次就够了。

写了一个超级讨厌的黑客,似乎为我做了诡计。 这是我做的。

  1. 检查我们使用的是触摸设备(在我的情况下,我称为IAmTouchy的variables。
  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); }); 

希望有人有一个更好的解决scheme,但!

 $.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设备上的一个点击redirect到search结果页面。

基于Liam Johnston解决scheme,我写了一个适用于我的autoFocus设置为true:

 var movedWhildAutocomplete = false; $(document) .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){ $(this).trigger('mouseenter'); movedWhildAutocomplete = false; }) .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){ movedWhildAutocomplete = true; }) .on('touchend', '.ui-autocomplete li.ui-menu-item', function(){ if (!movedWhildAutocomplete) { var $el = $(this); if ($el.is(':visible') && $el.hasClass('ui-state-focus')) { $el.trigger('click'); } } movedWhildAutocomplete = false; }); 

自动填充小部件有一些内置的事件,您可以添加到您的代码… jqueryui

我遇到了同样的问题,最后想出了如何修改代码并强制移动设备只需点击一下即可响应。

基本上,对于移动设备(iOs),当您点击自动完成列表“一次”,它将触发“焦点”事件,如果再次单击(第二次点击),它将把事件读取为“select”。 因此,为了强制iOs设备在一次点击上进行select,您必须强制它在第一次点击时进行select。

 $("#input").autocomplete({ source: yourSourceList, focus: function(event, ui) { $(this).val(ui.item.value); $(".ui-menu").hide(); //you can also console.log(ui.item.value); for the selected widget object } }); 

使用fastclick.js它将解决这个问题。 我知道这是用于消除300毫秒的延时,但它解决了这个问题也是我的。

  1. 下载FastClick的缩小版本(或者,您可以按照说明在这里安装非缩小版本)

  2. 将文件包含在您的项目中:

    <script src =“js / fastclick.min.js”> </ script>

  3. 加载FastClick后,将FastClick对象附加到文档中:

    var attachFastClick = Origami.fastclick;

    attachFastClick(document.body的);

注意:如果您尝试使用FastClick的非缩小方式,即:

 <script src = "js/fastclick.js"></script>; 

然后使用

FastClick.attach(document.body的);

但包括缩小的文件,你会收到错误(告诉你,FastClick是未定义的)。 如果您使用缩小文件,则必须通过折纸访问它。

你大概可以使用自动完成的focus事件!

重点(事件,用户界面)

 $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; var selectAction = function(event, ui) { //do whatever you want with event and ui objects console.log(ui.item) } $("#tags").autocomplete({ source: availableTags, focus: selectAction, select: selectAction }); }); 
 <script src="jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <label for="tags">Tags:</label> <input id="tags"> 

来自RaphaëlMalié的解决scheme几乎是完美的,但它需要evt.preventDefault()作为touchend,否则它会生成点击项目下的链接/button的点击。

  var movedWhildAutocomplete = false; $(document) .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){ $(this).trigger('mouseenter'); movedWhildAutocomplete = false; }) .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){ movedWhildAutocomplete = true; }) .on('touchend', '.ui-autocomplete li.ui-menu-item', function(evt){ if (!movedWhildAutocomplete) { var $el = $(this); if ($el.is(':visible') && $el.hasClass('ui-state-focus')) { evt.preventDefault(); $el.trigger('click'); } } movedWhildAutocomplete = false; }); 

我正在与jQuery UI和Cordova一起工作,而且我在应用程序中遇到同样的问题,我的解决scheme是这样的:

 $('.ui-autocomplete').mouseenter( function( e ){ e.preventDefault(); e.stopPropagation(); }); 

这停止对所选项目的重点。

此代码适用于自动对焦

 $("#input").autocomplete({ source: ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5"], autoFocus: true, focus: function(event, ui) { if (navigator.userAgent.match(/(iPod|iPhone|iPad)/) && event.bubbles) { $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", {item: ui.item} ); $(this).autocomplete("close"); } return false; }, select: function(event, ui) { $(this).val(ui.item.label); } });