Google, Windows Mobile IE tarayıcısında çalışmıyor Otomatik tamamlama IE Tarayıcı

Question

ridingo ürünümüz için bir mobil site oluşturuyoruz.

Sitemizdeki google yerleri otomatik tamamlama özelliğini yoğun bir şekilde kullanıyoruz. Bu, kullanıcılara yazarken öneri sağlamak için kullanılır.

Bunu, birden fazla tarayıcıda ve cihazda test ettik. Bu, Android cihazlarda ve IOS'de çalışıyor.

1. Biz otomatik olarak doldurmak listesinde istenen öğeye dokunun edemedik: Fakat, Windows mobile (OS Version 8, IE tarayıcı) üzerinde, tamamlama/otomatik olarak doldurmak liste

   Sorunlar neredeyse kullanılamaz. Ona dokunduğunuzda, listeyi otomatik olarak kapatır ("ESC" düğmesine bastığımızda gördüğümüze benzer davranış veya pencerede başka bir yere tıklayın). Bu nedenle, seçilen herhangi bir liste öğesini alamıyoruz.

2. Liste, metin kutusundan biraz daha düşük bir yerde işlenir. Bu sorun ekran görüntüsünde de olabilir.

Tech şeyler Biz kullanın:

• jQuery 1.7.1
• Ben biraz çimdik yapmaya çalıştık 2.3.2

Answer 1

twitter önyükleme jQuery. Bu geçici bir çözüm, umarım google bu hatayı çözmeyi başaracaktır.

Ive otomatik tamamlama metin alanını başlatırken sonra kod aşağıdaki eklendi:

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

Ve yükleme yaparken: Sadece ikinci çalışır

$(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() 
     } 
    ); 
    } 
    }); 
}); 

bir karakterin girmek, ama en azından için çalışıyor bu zaman.

Answer 2

Her iki sorun için de geçici çözümler bulundu. Sorun # için

Geçici çözüm 2

JS (sadece otomatik tamamlama başlatma kodundan sonra bu ekleyin):

// 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; 
} 

Geçici çözüm sorunu 1. için (Lille ve Mühendis'e teşekkürler - what javascript will simulate selection from the google maps api 3 places autocomplete dropdown?)

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);