Autocomplete problem on mobile device
Hi There, im having an issue, where on a mobile device the onscreen keyboard covers the menu items from the autocomplete suggestion, if i use Blur() with the On callback, the keyboard disappears but the menu items dont show either, im thinking this cause it must be tied to the text input being infocus,
what are my options getting around this on a mobile/tablet device with virtual keyboard
- $('#autoComp').autocomplete({
- source: function( request, response ) {
- $.ajax({
- url : 'ajax.php',
- type: 'POST',
- dataType: "json",
- data:{
- query: request.term
- },
- success: function( data ) {
- if(data.length == 0){
- data.push({
- label: "Name not Found - Click to Continue",
- value: 0
- });
- response(data);
- }else{
- response(
- $.map( data, function( item ) {
- var code = item.split("|");
- return {
- label: code[0] + " - " + code[1],
- value: code[0],
- data : item
- }
- })
- );
- }
- }
- });
- },
- autoFocus: true,
- minLength: 3,
- select: function( event, ui ) {
- if(ui.item.value == "Name not Found - Click to Continue"){
- hideAutoComplete();
- $('#name').val($('#autoComp').val());
- setTimeout(function(){
- selectParty();
- }, 900);
- }else{
- hideAutoComplete();
- setTimeout(function(){
- selectParty();
- }, 900);
- var names = ui.item.data.split("|");
- $('#name').val(names[0]);
- $('#village').val(names[1]);
- }
- }, open: function( event, ui ) {
- $('.ui-autocomplete, .ui-front, .ui-menu ui-widget, .ui-widget-content').css('display', 'block');;
- $(this).blur();
- }
-
- });
Thanks