Google помещает автозаполнение в Windows Mobile IE браузера

Question

Мы строим мобильный сайт для нашего продукта ridingo.

Мы используем функцию автозаполнения сайтов google на нашем сайте. Используется для предоставления предложений пользователям по мере их ввода.

Мы протестировали это на нескольких браузерах и на устройствах. Это прекрасно работает на устройствах Android и IOS. Но, на Windows Mobile (OS Версии 8, IE браузер), список автозаполнения/заполняются автоматически практически непригодным для использования

Проблемы:

1. Мы неспособны коснуться нужного пункта в списке заполняются автоматически. При касании этого он автоматически закрывает список (поведение похоже на то, что мы увидим, когда мы нажимаем кнопку «ESC» или кликаем в другое место в окне). Из-за этого мы не можем выбрать какой-либо элемент списка.
2. Список отображается в чуть более низком месте, чем текстовое поле. Эта проблема может быть и на скриншоте.

Tech материал Мы используем:

• JQuery 1.7.1
• Twitter Bootstrap 2.3.2

Answer 1

Я попытался сделать немного подправить с JQuery. Это временное решение, и, надеюсь, Google удастся решить эту проблему.

Ive добавил следующий код после инициализации моего автозаполнения текстового поля:

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

И когда загрузка:

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

Он работает только на втором ввести персонаж, но, по крайней мере, это работает в этот раз.

Answer 2

Обнаружены обходные пути для обеих проблем.

Обход проблемы # 2

JS (добавить это только после того, как код инициализации автозаполнения):

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

Обход проблемы # 1 (благодаря Лиллу и Инженеру - 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);