css - html attributes list




خرائط جوجل الإكمال التلقائي، إصلاح إلى الإدخال (3)

أحاول إضافة إدخال جوجل خرائط الإكمال التلقائي لبلدي التطبيق الأيونية. أنها تعمل بشكل جيد جدا إلا عندما كنت انتقل. كما هو مبين في الصورة:

موقف علة عند التمرير

لذلك حاولت أشياء مختلفة مثل تغيير موقف .pac حاوية لكنه لا يحل المشكلة. عند فحص الصفحة، يبدو أن حاوية النتائج يتم تحميلها في نهاية الصفحة، لذلك ليس من السهل جعل عصا الحظر إلى شريط الإدخال.

لقد بحثت في كل مكان ولم أكن فيدن أي حل مناسب؟ هل لدى شخص ما فكرة عن كيفية القيام بذلك؟ (انها في الواقع مجرد رمز بسيط مثل هذا:

    function initialize() {
            var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
        new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')), options);
    }

    initialize();

jsfiddle

شكرا مقدما، روبن فوركيد.


كنت الآن قادرة على إعادة إنتاج المشكلة، والحل هو ببساطة إضافة position: relative إلى box المجمع الخاص بك position: absolute إلى #autocomplete المدخلات.

حصلت على حل للتحقق من المثال الذي قدمه فريق غوغل.

لقد قمت بتحديث كمان الخاص لتتناسب مع الحل، لكنه يذهب مثل هذا:

كس المحدث:

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

لدي نفس المشكلة. كان حلي:

$('#inputContainer').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
    $('.pac-container').css('top', newTop + 'px');
  }
});

هذا التحديث موقف المنسدلة عند مخطوطات حاوية.


حصلت على حل التحقق من المثال لا مشكلة مع موقف علة عند التمرير

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);
}

https://codepen.io/gmkhussain/pen/qPpryg







autocomplete