Google stellt die automatische Vervollständigung in Windows Mobile IE nicht zur Verfügung. Browser

Question

Wir erstellen eine mobile Website für unser Produkt ridingo.

Wir verwenden die Google Places-Autocomplete-Funktion ausführlich auf unserer Website. Dies wird verwendet, um Benutzern beim Schreiben Vorschläge zu geben.

Wir haben dies über mehrere Browser und auf Geräten getestet. Das funktioniert gut in Android-Geräten und IOS. Aber auf Windows Mobile (OS Version 8, IE-Browser), die zur automatischen Vervollständigung/Autovervollständigung Liste ist fast unbrauchbar

Probleme:

1. Wir sind nicht in der Lage den gewünschten Punkt auf der automatisch ausgefüllt Liste zu berühren. Wenn Sie es berühren, schließt es automatisch die Liste (Verhalten ähnlich dem, das wir sehen würden, wenn wir die "ESC" -Taste drücken oder irgendwo anders auf das Fenster klicken). Aus diesem Grund können wir kein Listenelement auswählen.
2. Die Liste wird an einer etwas niedrigeren Stelle als das Textfeld gerendert. Dieses Problem kann auch auf dem Screenshot angezeigt werden.

Tech Material Wir verwenden:

• jQuery 1.7.1
• twitter Bootstrap 2.3.2

Answer 1

Ich habe versucht, ein wenig zwicken zu tun mit Jquery. Es ist eine vorübergehende Lösung, hoffentlich schafft Google es, diesen Fehler zu beheben.

Ive hinzugefügt folgenden Code nach meinem Autocomplete Textfeld Initialisierung:

<input type="text" id="maps-autocomplete" placeholder="I'm staying at..." autocomplete="off" /> 

Und beim Laden:

$(function() { 
    var autocomplete = new google.maps.places.Autocomplete((document.getElementById('maps-autocomplete'))); 
    $('#maps-autocomplete').keyup(function(e) { 
    var container = $('.pac-container').first(); 
    if (container.offset().top > $(this).offset().top + $(this).outerHeight()) { 
     container.offset(
     { 
      top: $(this).offset().top + $(this).outerHeight() 
     } 
    ); 
    } 
    }); 
}); 

Es funktioniert nur auf dem zweiten ein Zeichen eingeben, aber zumindest funktioniert es für diesmal.

Answer 2

Es wurden Problemumgehungen für beide Probleme gefunden.

Abhilfe für Problem # 2

JS (fügen Sie diese direkt nach dem die automatische Vervollständigung Initialisierungscode):

// Fix autocomplete position in Windows Phone 8.1. Also see CSS rules. 
// Wait until the autocomplete element is added to the document. 
var fixEutocompleteInterval = window.setInterval(function(){ 
    var $container = $('body > .pac-container'); 
    if ($container.length == 0) return; 
    // Move the autocomplete element just below the input. 
    $container.appendTo($('#address').parent()); 
    // The fix is finished, stop working. 
    window.clearInterval(fixEutocompleteInterval); 
}, 500); 

CSS:

// Fixes Google Maps Autocomplete position. Also see the JS code. 
#address_container { 
    position: relative; 
} 
.pac-container { 
    position: absolute !important; 
    top: 34px !important; 
    left: 1px !important; 
} 

Abhilfe für Problem # 1 (Danke an Lille und Engineer - what javascript will simulate selection from the google maps api 3 places autocomplete dropdown?)

erfordert jquery.simulate.js

// Fix autocomplete selection in Windows Phone 8.1. 
window.setInterval(function(){ 
    // A workaround for missing property that was deprecated. 
    $.browser = {msie: (/msie|trident/i).test(navigator.userAgent)}; 
    $items = $('.pac-container .pac-item').not('.tracking'); 
    $items.addClass('tracking'); // Add event listener once only. 
    $items.mousedown(function(e){ 
     // Get the text selected item. 
     var $item = $(this); 
     var $query = $item.find('.pac-item-query'); 
     var text = $query.text() + ', ' + $query.next().text(); 
     // Let this event to finish before we continue tricking. 
     setTimeout(function(){ 
      // Check if Autocomplete works as expected and exit if so. 
      if ($address.val() == text) { console.log('exit'); return } 
      $address.trigger("focus"); 
      // Press key down until the clicked item is selected. 
      var interval = setInterval(function(){ 
       $address.simulate("keydown", { keyCode: 40 }); 
       // If selected item is not that clicked one then continue; 
       var $query = $('.pac-container .pac-item-selected .pac-item-query:first '); 
       if (text != $query.text() + ', ' + $query.next().text()) return; 
       // Found the clicked item, choice it and finish; 
       $address.simulate("keydown", { keyCode: 13 }); 
       $address.blur(); 
       clearInterval(interval); 
      }, 1) 
     }, 1) 
    }); 
}, 500);