6

アドレスの一部であるさまざまな入力テキスト ボックスで Google マップのオートコンプリートを行う次の JavaScript コードがあります。

function startAutoComplete() {
    var address = document.getElementById("addressId");
    var city = document.getElementById("cityId");
    var state = document.getElementById("stateId");
    var zip = document.getElementById("zipId");

    //option for autocomplete
    var option = {types: ['geocode'], componentRestrictions: {country: 'us'}};

    //autocomplete for address textbox
    autocomplete = new google.maps.places.Autocomplete(address, option);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();

        //parses the result object and populates the other textboxes accordingly
        for(i=0; i<place.address_components.length; i++)
        {
            if(place.address_components[i].types[0] == 'locality')
            city.value = place.address_components[i].long_name;

            if(place.address_components[i].types[0] == 'administrative_area_level_1')
            state.value = place.address_components[i].short_name;

            if(place.address_components[i].types[0] == 'postal_code')
            zip.value = place.address_components[i].long_name;
        }

        /* Here is the PROBLEM */
        address.value = place.name;

    });

ただし、完全な住所の短縮版で自動補完されているテキストボックスを更新しようとすると（ここでは番地と番地のみ）。完全な住所テキスト ボックスの値は変更されません。jquery を使用して、テキスト ボックスの setAttribute() で value 属性を設定しようとしました。私は何を間違っていますか？

4

4 に答える 4

1

Autocomplete オブジェクトには、明確ではないイベント リスナーがいくつかあります。現実には、コードを実行すると実際に値が変更され、Autocomplete オブジェクトによって値が非常に速く元に戻されます。これをテストするには、行の後に追加alert();しますaddress.value = place.name;。setTimeout()1ms の遅延で値を設定する a を追加すると、値を維持するように誘惑できます。ただし、フィールドを離れると、オートコンプリートのblurイベントがトリガーされ、住所が再び上書きされます。この問題は 1 行で解決できます。

address.addEventListener('blur', function() { address.value = place.name; });

これは最初のケースも処理するので、. を追加する必要さえありませんsetTimeout()。値を設定するための行をこのイベント リスナーに置き換えます。これにより、起動されるたびにテキストを設定するオートコンプリートのコールバック関数が置き換えられます。

于 2014-05-24T02:04:10.363 に答える
0

私は非常に一時的な解決策を見つけました。意図的にエラーを作成すると、元のテキストボックスからGoogleマップのオートコンプリートが解除され、更新された値で元のテキストボックスが表示されるようです。実際には解決策ではありませんが、それは始まりです

//Created this variable that stores the pac-container
var element = document.getElementsByClassName("pac-container");

//inside the addListener() function I added this to create a DOM error
element[0].childNodes[0].childNodes[0].removeChild();

javascriptはエラーをスローしますが、少なくとも「.value」を使用してテキストボックスに必要なものを入力できます。

ここでも解決策ではなく、スタートです。より良い解決策が見つかることを願っています。

于 2012-12-19T01:25:16.657 に答える
0

要素を複製してから同じものに置き換えてから、もう一度initializeを呼び出すのはどうですか。

まあこんなもの。これは過去に私のために働いていました。

$("#Id").replaceWith($("#Id").clone());
initialize();

ここで initailize は、dom が google.maps.event.addDomListener(window, 'load', initialize); をロードするときに呼び出されるメソッドです。あなたの場合、それは異なるかもしれません

于 2013-04-23T09:31:24.073 に答える