6

この質問は、次の回答に関連しています: Google maps Places API V3 autocomplete - select first option on enter。基本的には、ユーザーが Enter キーを押したときに、フィールドがオートコンプリート リストの最初の候補を使用するようにすることです。その質問に対する答えにはjsfiddleがあります - http://jsfiddle.net/dodger/pbbhH/ - テキストフィールドがフォーカスを失った場合を除いて機能し、フィールド値は部分的に入力された値に戻ります。

たとえば、ユーザーが入力フィールドをクリックして「ox」と入力すると、オートコンプリート ボックスにいくつかの候補が表示され、ユーザーが Enter キーを押します。次に、オートコンプリート ボックスの最初のアイテムの位置を (マーカーで) 表示するようにマップが変更され、入力フィールドの値がオートコンプリート ボックスの最初のアイテムに変更されます。次に、ユーザーがフィールドの外側のどこかをクリックすると、入力フィールドの値が「ox」に戻ります。

入力フィールドの値を最初のオートコンプリート候補のままにしたいと思います。

4

2 に答える 2

11

これを試してください：http://jsfiddle.net/pbbhH/60/

基本的に、選択ロジックを新しい関数selectFirstResult()に抽象化しました。次に、Enter キーを押してテキストにフォーカスを失ったときに、この関数を呼び出しました。

 function selectFirstResult() {
    infowindow.close();
    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);

            moveMarker(placeName, latlng);
            $("input").val(firstResult);
        }
    });   
 }

編集：以下の@Benのコメントに従ってマイナーな変更を加えました。

于 2012-05-27T07:43:06.637 に答える
1

これは正しいですが、Enterキーを押して、すでにアイテムを選択している場合は、最初のアイテムが選択されます。したがって、次のコードを使用します。

function selectFirstResult() {
infowindow.close();
if ( $('.pac-selected').length < 0){ // this line

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);

        moveMarker(placeName, latlng);
        $("input").val(firstResult);
    }
});
}   
}
于 2012-10-03T12:15:39.230 に答える