javascript - jQuery UI AutoComplete Combobox Options require double click on iPhone -
i have created app cordova contains jquery custom autocomplete comboboxes. works on browser on physical android device. put app on iphone encounter small bug annoying end users.
the bug: once options displayed combobox user, must click once, hi-lights choice, , second click make selection. intended use on android devices click once on option make selection.
before clicks http://i.stack.imgur.com/cekbt.png
first click http://i.stack.imgur.com/jeafo.png
the first click should making selection instead hi-lights option , waits user click on highlighted option once again. same issue happens on iphone simulator on physical device, don't believe device specific.
here html
<div class="ui-widget"><select id="testcombo"></select></div>
js turn combobox
$("#testcombo").combobox()
and here custom widget being used combo box
(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 if user types //a value not in options, gets removed //autocompletechange: "_removeifinvalid" autocompletechange: "userchanged" }); }, _createshowallbutton: function() { var input = this.input, wasopen = false; $( "<a>" ) .attr( "tabindex", -1 ) // .attr( "title", "show 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 visible if ( wasopen ) { return; } // pass empty string value search for, displaying 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 = $( ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: }; }) ); }, _removeifinvalid: function( event, ui ) { // selected item, nothing if ( ui.item ) { return; } // search match (case-insensitive) var value = this.input.val(), valuelowercase = value.tolowercase(), valid = false; this.element.children( "option" ).each(function() { if ( $( ).text().tolowercase() === valuelowercase ) { this.selected = valid = true; return false; } }); // found match, nothing if ( valid ) { return; } // remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match 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 combobox autocomplete : function(value) { this.element.val(value); this.input.val(value); }, //set placeholder of combobox placeholder : function(value) { this.element.attr("placeholder",value); this.input.attr("placeholder",value); }, //used custom typed text 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 );
the reason related tooltip. iphone firstly executing hover events next click real click event. had same problem , removed "hover" items solved problem.
Comments
Post a Comment