使用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＆＃34; / show＆＃34;页。
JSFiddles： （键入一封信以显示结果＆＃34; s＆＃34;是一个很好的信息）
我已经在这方面工作了好几天，但在仅测试html视图之前，还没有能够在JSFiddle中重现它。所以现在我转向你。我不能为我的生活找出为什么一个页面触发点击事件，而另一个页面没有触发点击事件。
我正在使用jQuery自动完成的最基本功能。实际上，使用与jQuery UI主页上显示的完全相同的代码。
那么，如何在/ show页面上点击iOS中的一次点击才能获得自动完成功能？
（我会在评论中发布其他链接，因为我还没有10个代表。除非我没有足够的代表发表评论......）
答案 0 :(得分：48)
稍后，但是
$("#input").autocomplete({
open: function(event, ui) {
$('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
}
});
答案 1 :(得分：21)
出于某种奇怪的原因@onlydimon's回答对我没有用。我们似乎确实需要事件mouseenter。以下答案对我来说效果很好。
open: function (result) {
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.ui-autocomplete').off('menufocus hover mouseover');
}
},
我添加了一个条件，以确保它不会在其他设备中中断。
答案 2 :(得分：13)
以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＆＃39; mouseenter＆＃39;事件。只删除这个修复了我的错误。此外，每次打开列表时都不需要删除它;一次就够了。
答案 3 :(得分：3)
写了一个超级讨厌的黑客，似乎对我有用。这就是我所做的。
（可选）再次尝试...如果设置的时间不够长，元素无法获得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);
});
希望有人有更好的解决方案！
答案 4 :(得分：3)
$.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设备即可重定向到搜索结果页面。
答案 5 :(得分：1)
根据Liam Johnston解决方案，我写了一个对我有用的自动聚焦设置为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;
});
答案 6 :(得分：1)
自动填充小部件有一些内置的事件，您可以将其添加到您的代码中...... jqueryui
我遇到了同样的问题，最后想出了如何调整代码并强制移动设备只需点击一下即可响应。
当您点击自动完成列表时，对于移动设备（iO）来说，一旦＆＃39;它将触发＆＃34;焦点＆＃34;如果您再次单击（第二次单击），它将读取事件为＆＃34;选择＆＃34;。因此，为了强制iOs设备在一次单击时选择，您必须强制它在第一次单击时选择。
$("#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
}
});
答案 7 :(得分：0)
使用fastclick.js会解决这个问题。我知道这个js用于消除300ms的tap延迟，但它也为我解决了这个问题。
下载FastClick的缩小版本（或者，您可以按照此处安装非缩小版本的说明进行操作）
在项目中包含该文件：
＆lt; script src =＆＃34; js / fastclick.min.js＆＃34;＆gt;＆lt; / script＆gt;
加载FastClick后，将FastClick对象附加到文档：
var attachFastClick = Origami.fastclick;
attachFastClick（document.body的）;
注意：如果您尝试使用FastClick非缩小方式，即：
<script src = "js/fastclick.js"></script>;
然后使用
FastClick.attach（document.body的）;
但是包含缩小的文件，您将收到错误（告诉您FastClick未定义）。如果您使用的是缩小文件，则必须通过Origami访问它。
答案 8 :(得分：0)
你可以使用自动完成的if (pitch > 10)
{
//display icon
}
else if (pitch <10)
{
//display icon
}
//etc..
事件！
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
});
});
答案 9 :(得分：0)
来自RaphaëlMalié的解决方案几乎是完美的，但是对于touchend需要evt.preventDefault（），否则它会在点击项目下的链接/按钮上生成一个点击。
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;
});
答案 10 :(得分：0)
我正在使用jQuery UI和cordova，我在应用程序中遇到同样的问题，我对此问题的解决方案是：
$('.ui-autocomplete').mouseenter( function( e ){
e.preventDefault();
e.stopPropagation();
});
这会停止对所选项目的关注。
答案 11 :(得分：0)
此代码适用于autoFocus
$("#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);
}
});