Javascript jQuery UI自动完成组合框选项需要双击iPhone
我用Cordova创建了一个包含jQuery自定义自动完成组合框的应用程序。它在浏览器和物理android设备上都能完美工作。然而,现在我将应用程序放在iPhone上,我遇到了一个小错误,这可能会让最终用户非常恼火 错误: 一旦选项从组合框显示给用户,他们必须单击一次,这将照亮他们的选择,然后单击第二次以实际进行选择。Android设备上的预期用途是只单击一次选项进行选择 在任何单击之前 首先单击 第一次单击应该是进行选择,但只是hi点亮选项,并等待用户再次单击突出显示的选项。同样的问题也发生在iPhone模拟器和物理设备上,所以我不认为它是特定于设备的 以下是HTMLJavascript jQuery UI自动完成组合框选项需要双击iPhone,javascript,jquery,ios,cordova,combobox,Javascript,Jquery,Ios,Cordova,Combobox,我用Cordova创建了一个包含jQuery自定义自动完成组合框的应用程序。它在浏览器和物理android设备上都能完美工作。然而,现在我将应用程序放在iPhone上,我遇到了一个小错误,这可能会让最终用户非常恼火 错误: 一旦选项从组合框显示给用户,他们必须单击一次,这将照亮他们的选择,然后单击第二次以实际进行选择。Android设备上的预期用途是只单击一次选项进行选择 在任何单击之前 首先单击 第一次单击应该是进行选择,但只是hi点亮选项,并等待用户再次单击突出显示的选项。同样的问题也发
<div class="ui-widget"><select id="testCombo"></select></div>
下面是用于组合框的自定义小部件
(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 );
(函数($){
$.widget(“custom.combobox”{
选项:{
“userChanged”:函数(){
//@如果需要,可以覆盖
}
},
_创建:函数(){
this.wrapper=$(“”)
.addClass(“自定义组合框”)
.insertAfter(此元素);
this.element.hide();
这是。_createAutocomplete();
这是。_createShowAllButton();
},
_createAutocomplete:function(){
var selected=this.element.children(“:selected”),
value=selected.val()?selected.text():“”;
this.input=$(“”)
.appendTo(this.wrapper)
.val(值)
.attr(“标题”、“名称”)
.addClass(“自定义组合框输入ui小部件ui小部件内容ui状态默认ui左角”)
.自动完成({
延迟:0,
最小长度:0,
来源:$.proxy(此“\u来源”)
})
.工具提示({
tooltipClass:“ui状态突出显示”
});
此。_on(this.input{
自动完成选择:功能(事件、用户界面){
ui.item.option.selected=true;
此._触发器(“选择”,事件{
项目:ui.item.option
});
},
//*删除下面的注释代码,以便
//如果值不在选项中,则会将其删除
//AutoCompleteTechange:“\u RemoveFinValid”
自动完成技术更改:“用户已更改”
});
},
_createShowAllButton:函数(){
var input=this.input,
wasOpen=false;
$( "" )
.attr(“tabIndex”,-1)
//.attr(“标题”、“显示所有项目”)
.工具提示()
.appendTo(this.wrapper)
.按钮({
图标:{
主要:“ui-icon-triangle-1-s”
},
文本:false
})
.removeClass(“用户界面角全部”)
.addClass(“自定义组合框切换ui右角”)
.mousedown(函数(){
wasOpen=input.autocomplete(“小部件”)是(“:可见”);
})
。单击(函数(){
input.focus();
//如果已经可见,请关闭
如果(打开){
返回;
}
//将空字符串作为要搜索的值传递,显示所有结果
input.autocomplete(“搜索”和“);
});
},
_来源:功能(请求、响应){
var matcher=newregexp($.ui.autocomplete.escapeRegex(request.term),“i”);
响应(this.element.children(“option”).map(函数(){
var text=$(this.text();
if(this.value&(!request.term | | matcher.test(text)))
返回{
标签:文本,
值:文本,
选项:这个
};
}) );
},
_RemoveFinValid:函数(事件,ui){
//已选择项目,无需执行任何操作
if(ui.item){
返回;
}
//搜索匹配项(不区分大小写)
var value=this.input.val(),
valueLowerCase=value.toLowerCase(),
有效=错误;
this.element.children(“option”).each(function(){
if($(this).text().toLowerCase()==valueLowerCase){
this.selected=valid=true;
返回false;
}
});
//找到一根火柴,没什么可做的
如果(有效){
返回;
}
//删除无效值
这是输入
.val(“”)
.attr(“标题”,值+“不匹配任何项目”)
.工具提示(“打开”);
this.element.val(“”);
这是延迟(函数(){
this.input.tooltip(“close”).attr(“title”,”);
}, 2500 );
this.input.autocomplete(“实例”).term=“”;
},
_销毁:函数(){
this.wrapper.remove();
this.element.show();
},
//组合框的设置值
自动完成:函数(值){
this.element.val(值);
这个.input.val(值);
},
//设置组合框的占位符
占位符:函数(值){
this.element.attr(“占位符”,值);
this.input.attr(“占位符”,值);
},
//用于从自动标记中获取自定义键入的文本
getval:function(){
var value=this.input.val();
如果(值==“”){
返回null;
}否则{
返回值;
}
},
userChanged:function(){
if($.isFunction(this.options.userChanged))
this.options.userChanged();
}
});
})(jQuery);
原因可能与工具提示有关。Iphone首先执行悬停事件,然后下一次单击是真正的单击事件。我遇到了同样的问题,删除了“悬停”项解决了我的问题。原因可能与工具提示有关。Iphone首先执行悬停事件,然后下一次单击是真正的单击事件。我也遇到了同样的问题,删除了“悬停”项解决了我的问题。我删除了所有悬停样式,但似乎无法解决问题。我删除了所有悬停样式,似乎无法解决问题
(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 );