在更新到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”事件。 删除只是这个修复了我的错误。 而且，每次打开列表时不需要删除它; 一次就够了。
写了一个超级讨厌的黑客，似乎为我做了诡计。 这是我做的。
- 检查我们使用的是触摸设备（在我的情况下，我称为IAmTouchy的variables。
- 监听自动完成结果的轻敲（touchstart）。
- 经过一段时间后，检查自动完成结果是否仍然可见。 如果他们是，并且一个项目被集中，触发点击它。
-
（可选）再试一次…如果设置的时间不足以让元素获得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毫秒的延时，但它解决了这个问题也是我的。
-
下载FastClick的缩小版本（或者，您可以按照说明在这里安装非缩小版本）
-
将文件包含在您的项目中：
<script src =“js / fastclick.min.js”> </ script>
-
加载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); } });
