jQuery UI 自动完成组合框选项需要在 iPhone 上双击
Posted
技术标签:
【中文标题】jQuery UI 自动完成组合框选项需要在 iPhone 上双击【英文标题】:jQuery UI AutoComplete Combobox Options require double click on iPhone 【发布时间】:2015-08-19 15:21:25 【问题描述】:我使用 Cordova 创建了一个包含 jQuery 自定义自动完成组合框的应用程序。它可以在浏览器以及物理 android 设备上完美运行。然而,现在我将应用程序放在 iPhone 上,我遇到了一个小错误,这对最终用户来说可能非常烦人。
错误: 一旦选项从组合框中显示给用户,他们必须单击一次,这会高亮他们的选择,然后单击 第二次 以实际进行选择。在 android 设备上的预期用途是只单击一次选项以进行选择。
在任何点击之前 http://i.stack.imgur.com/CEKbT.png
首次点击 http://i.stack.imgur.com/JEAfo.png
第一次点击应该是做出选择,但只是高亮选项并等待用户再次点击突出显示的选项。同样的问题也发生在 iPhone 模拟器和物理设备上,所以我不相信它是特定于设备的。
这里是 HTML
<div class="ui-widget"><select id="testCombo"></select></div>
Js把它变成一个ComboBox
$("#testCombo").combobox()
这是用于组合框
的自定义小部件(function( $ )
$.widget( "custom.combobox",
options:
'userChanged': function()
//@Overridden if needed
,
_create: function()
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
,
_createAutocomplete: function()
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete(
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
)
.tooltip(
tooltipClass: "ui-state-highlight"
);
this._on( this.input,
autocompleteselect: function( event, ui )
ui.item.option.selected = true;
this._trigger( "select", event,
item: ui.item.option
);
,
//* Remove commented code below so that if User types
//a value not in options, it gets removed
//autocompletechange: "_removeIfInvalid"
autocompletechange: "userChanged"
);
,
_createShowAllButton: function()
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
// .attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button(
icons:
primary: "ui-icon-triangle-1-s"
,
text: false
)
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function()
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
)
.click(function()
input.focus();
// Close if already visible
if ( wasOpen )
return;
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
);
,
_source: function( request, response )
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function()
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return
label: text,
value: text,
option: this
;
) );
,
_removeIfInvalid: function( event, ui )
// Selected an item, nothing to do
if ( ui.item )
return;
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function()
if ( $( this ).text().toLowerCase() === valueLowerCase )
this.selected = valid = true;
return false;
);
// Found a match, nothing to do
if ( valid )
return;
// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function()
this.input.tooltip( "close" ).attr( "title", "" );
, 2500 );
this.input.autocomplete( "instance" ).term = "";
,
_destroy: function()
this.wrapper.remove();
this.element.show();
,
//set value for combobox
autocomplete : function(value)
this.element.val(value);
this.input.val(value);
,
//set the placeholder of the combobox
placeholder : function(value)
this.element.attr("placeholder",value);
this.input.attr("placeholder",value);
,
//used to get the custom typed text from the autoCombo
getval: function()
var value = this.input.val();
if (value === "")
return null;
else
return value;
,
userChanged: function()
if($.isFunction(this.options.userChanged))
this.options.userChanged();
);
)( jQuery );
【问题讨论】:
【参考方案1】:原因可能与工具提示有关。 Iphone首先执行悬停事件,然后下一次点击是真正的点击事件。我有同样的问题,删除“悬停”项目解决了我的问题。
【讨论】:
我删除了所有悬停样式,但这似乎并没有解决问题以上是关于jQuery UI 自动完成组合框选项需要在 iPhone 上双击的主要内容,如果未能解决你的问题,请参考以下文章