1. ホーム
  2. javascript

Google maps Places API V3 オートコンプリート - 入力時に最初の選択肢を選ぶ

2023-11-15 13:48:25

質問

Google Maps Places V3 のオートコンプリート機能を、以下のように入力ボックスに実装することに成功しました。 http://web.archive.org/web/20120225114154/http://code.google.com:80/intl/sk-SK/apis/maps/documentation/javascript/places.html . うまく動作していますが、ユーザーがEnterキーを押したときに、候補の中から最初の選択肢を選択するようにするにはどうしたらよいかを知りたいと思います。私はいくつかのJSマジックが必要だと思いますが、私はJSに非常に慣れていないので、どこから始めればよいのかわかりません。

事前にありがとうございます!

どのように解決するのですか?

最近担当したサイトでオートコンプリートを実装する際に、同じ問題が発生しました。 これは、私が考え出した解決策です。

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            var firstResult = $(".pac-container .pac-item:first").text();

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});

http://jsfiddle.net/dodger/pbbhH/