30

私は JavaScript Google プレース オートコンプリート API v3 を使用しています。それは正常に動作しますが、オートコンプリートからの選択を強制する方法があるかどうか疑問に思っていました。これは、自由形式のテキストを受け入れない入力です。私はドキュメントを見て、そのようなオプションは見当たりませんでしたが、安全のためにお願いすることにしました。いくつかの JavaScript でそれを行う方法を考え出すことができると確信していますが、利用可能な場合は、既に構築されたメソッドを使用することをお勧めします。ありがとう！

4

13 に答える 13

17

実際に行ったことは次のとおりです:
- 場所がオート コンプリート リストから選択されるたびに、JSON 応答から取得したいくつかのフィールド (都市名、国名、経度と緯度) をいくつかの非表示フィールドに入力します
。送信されたら、これらのフィールドに値があるかどうかを確認します。値がない場合は、ユーザーがリストから場所を選択するのではなく、自分で値を入力したことを意味します。

JS の方法で問題を解決しているわけではありませんが、それでもうまく機能します。

于 2013-09-25T12:17:07.333 に答える
11 
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"
    type="text/javascript"></script>
<script>
    var IsplaceChange = false;
    $(document).ready(function () {            
        var input = document.getElementById('txtlocation');
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

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

            IsplaceChange = true;
        });

        $("#txtlocation").keydown(function () {
            IsplaceChange = false;
        });

        $("#btnsubmit").click(function () {

            if (IsplaceChange == false) {
                $("#txtlocation").val('');
                alert("please Enter valid location");
            }
            else {
                alert($("#txtlocation").val());
            }

        });
    });
</script>




于 2014-07-08T13:13:35.847 に答える
10

現在、Google Places API はこの機能をサポートしていません。これが便利な機能であると思われる場合は、Places API - Feature Requestを送信してください。

于 2013-02-05T05:26:23.030 に答える
1

私は同じ問題を抱えていました。以下は、回避策として思いついた機能です。これは、onchange や onkeyup などのイベントと組み合わせて使用​​できます。それが役に立てば幸い！

//Arguments:

address - string containing the place that you want to validate address_success_div - div object specifically used for displaying validation

function is_location_valid(address, address_success_div)
{
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( {"address": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            address_success_div.innerHTML = "SUCCESS";
        }
        else
        {
            address_success_div.innerHTML = "FAILURE";
        }
    });
}
于 2013-03-12T15:05:01.590 に答える
0

彼らが述べたように、Google Autocomplete API ではサポートされていません。オートコンプリート入力と等しいかどうかを確認するよりも、選択した場所を格納する隠し要素を作成することで、それを機能させる方法を見つけました。

/*----------------------------------------------------*/
/*  check if it's valid address
/*----------------------------------------------------*/
function checkAddress(location, validLocation) {
if (location.val() == validLocation.val()) {
    return true;
}
return false;
}

/*----------------------------------------------------*/
/*  initialize auto complete address
/*----------------------------------------------------*/
function initialize() {
 let input = document.getElementById('autocomplete-input');
 let inputHidden = document.getElementById('autocomplete-input-hidden');
 let options = {
    types: ['(regions)'],
    componentRestrictions: {country: "tn"}
 };
 let autocomplete =new google.maps.places.Autocomplete(input, options);
 autocomplete.setFields(['formatted_address']);
 autocomplete.addListener('place_changed', function () {
    inputHidden.value= autocomplete.getPlace().formatted_address;
 });
}

メインで関数を呼び出します。

 let location = $('#autocomplete-input');
 let validLocation = $('#autocomplete-input-hidden');
 checkAddress(location,validLocation);

そしてあなたのhtmlで：

 <input id="autocomplete-input" type="text">
 <input id="autocomplete-input-hidden" type="hidden" >
于 2020-06-02T18:26:23.003 に答える
-2

ここからのいくつかの異なる回答に関する提案を組み合わせて問題を解決しました。ユーザーがアドレスを入力するテキストフィールドは、txtPlaces と呼ばれます。これが私のコードです：

var pac_input = document.getElementById('txtPlaces');

(function pacSelectFirst(input) {
    // store the original event binding function
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if ((event.which == 13 || event.which == 9) && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }



        _addEventListener.apply(input, [type, listener]);
    }

    input.addEventListener = addEventListenerWrapper;
    input.attachEvent = addEventListenerWrapper;

    var autocomplete = new google.maps.places.Autocomplete(input);

})(pac_input);

$('#txtPlaces').blur(function(e){
    selectFirstAddress(pac_input);
});


////Ensuring that only Google Maps adresses are inputted
function selectFirstAddress (input) {
    google.maps.event.trigger(input, 'keydown', {keyCode:40});
    google.maps.event.trigger(input, 'keydown', {keyCode:13});
}

これは、ユーザーが別のフィールドを選択したときだけでなく、Enter キーまたは Tab キーにも適切に反応します。お役に立てれば！

于 2018-01-17T14:33:40.333 に答える